如何实现column-fill:auto的两栏布局并在第二栏顶部放置插图？

这个场景我之前处理过，在column-fill:auto的两栏布局里要把插图固定在第二栏顶部，同时让文字自然环绕，确实不能用position:fixed（脱离文档流会遮挡文字），直接用float也因为column布局的特性达不到预期，不过调整下元素结构和CSS属性就能搞定。

修改后的代码实现 #

HTML结构调整

把插图容器移到文本内容的前面，这样浮动元素能优先占据右侧空间：

<div class="main">
  <div class="description">
    <figure class="illustration-container">
      <img class="illustration" src="data:image:{{ p.id }}">
    </figure>
    <div class="text-content">
      <!-- 你的可变长度文本 -->
      longish text
    </div>
  </div>
</div>

CSS样式优化

通过浮动和防拆分属性实现需求：

.main {
  margin-top: 2cm;
  padding: 0 1cm 0cm 1cm;
  column-count: 2;
  column-gap: 2em;
  column-fill: auto;
  text-align: justify;
}

.produit-title {
  color: firebrick;
  padding: 2cm 1cm 0cm 1cm;
}

.illustration-container {
  float: right;
  margin: 0.1cm 0 1em 1em; /* 上下右左的边距，让文字环绕更自然 */
  break-inside: avoid; /* 关键：防止插图被column布局拆分到两栏 */
}

img.illustration {
  max-height: 5cm;
  max-width: 11cm;
  border: solid 0.04cm firebrick;
  display: block; /* 清除图片默认的inline元素间隙 */
}

核心原理说明 #

1. 浮动定位：把插图容器设为float:right，文本内容会自动环绕它。结合column的两栏布局，当第一栏被文本填满后，浮动的插图会被“挤”到第二栏的起始位置；如果文本很短只占第一栏，插图依然会固定在右侧第二栏的顶部区域。
2. 防拆分属性：break-inside: avoid确保插图容器不会被column布局拆分到两栏中，保证它始终是一个完整的块级元素出现在右侧。
3. 边距调整：通过margin控制插图和文字的间距，避免文本和插图过于拥挤，提升阅读体验。

这样不管文本长度如何变化，都能保持你想要的布局效果~

内容的提问来源于stack exchange，提问作者Ehvince