如何实现浮动图片下方文本自动分两栏的报纸式布局？

可以通过CSS多列布局结合浮动特性实现需求，无需JS获取高度，具体实现步骤如下：

1. 调整HTML结构 #

将浮动图片放在文本容器的起始位置，用容器包裹所有文本段落：

<div class="container">
  <img class="textimage" src="你的图片地址" alt="图片描述">
  <div class="text-content">
    <p>段落内容...</p>
    <p>段落内容...</p>
    <!-- 更多段落 -->
  </div>
</div>

2. 配置CSS样式 #

.container {
  overflow: hidden; /* 清除浮动影响 */
}

.textimage {
  width: 50%;
  float: right;
  margin-left: 1rem; /* 文本与图片的间距，可自定义 */
  margin-bottom: 1rem;
}

.text-content {
  column-count: 2; /* 设置超出后分为两栏 */
  column-gap: 1rem; /* 栏之间的间距 */
}

/* 避免单个段落被拆分到两栏，优化阅读体验 */
.text-content p {
  break-inside: avoid;
}

实现原理 #

• 浮动图片占据容器右侧50%宽度，文本会先在图片左侧填充，直到文本高度超过图片高度。
• column-count: 2会让超出图片高度的文本自动流入第二栏，形成报纸式排版效果。
• 整个方案基于纯CSS特性，完全适配图片的视口可变尺寸，无需JS计算高度。

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