如何让文本填满首列后再流入第二列？CSS多列布局问题

你遇到的是CSS多列布局的默认行为——column-count默认启用column-fill: balance，浏览器会尽量让各列行数保持一致，哪怕设置了容器高度，如果高度不足以让第一列单独容纳所有内容，它还是会自动平衡列高。

要实现“填满第一列再延续到第二列”的效果，纯CSS完全可以做到，下面给你两种可行方案：

方案1：调整多列布局的column-fill属性 #

如果你想继续使用多列布局，只需要给容器加上column-fill: auto，同时设置一个足够大的固定高度（高度值要大于单列能容纳的所有内容的高度），这样浏览器就会先填满第一列，再把剩余内容放到第二列。

示例代码：

#container {
  column-count: 2;
  column-fill: auto;
  height: 500px; /* 按需调整，确保高度能装下单列所有内容 */
  column-gap: 2rem; /* 可选，设置列之间的间距 */
}

注意：如果设置的高度小于单列内容的总高度，浏览器还是会自动平衡两列的高度，所以高度值一定要足够大。

方案2：改用Flexbox竖排换行 #

如果不想依赖固定高度，也可以放弃多列布局，用Flexbox实现竖排换行的效果。通过设置flex-direction: column和flex-wrap: wrap，内容会先在容器内垂直排列，填满第一列高度后自动换到第二列。

示例代码：

#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh; /* 可以用视口高度、父容器高度等，按需调整 */
  width: 100%;
}

这种方式的好处是不需要硬写固定高度，只要容器有明确的高度限制（比如占满视口），就能自动实现先填第一列再换列的效果。

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