如何使用 CSS 多列布局实现文本自动分栏（如书籍双栏效果）-html教程-PHP中文网

如何使用 CSS 多列布局实现文本自动分栏（如书籍双栏效果）

本文介绍如何用 column-count 替代 Flexbox 实现真正的文本流式分栏，让长段落内容自动在左右两栏间断行填充，而非整块元素换列。

本文介绍如何用 `column-count` 替代 flexbox 实现真正的文本流式分栏，让长段落内容自动在左右两栏间断行填充，而非整块元素换列。

Flexbox 的 flex-flow: column wrap 本质是容器内子元素按列顺序堆叠并换列，它不会拆分单个子元素的内容——也就是说，每个 <div> 段落始终作为一个不可分割的整体，要么完整显示在第一列，要么整体移至第二列。这正是你遇到的问题：段落无法“断开”以填满第一列剩余空间。<p>要实现类似印刷书籍的自然双栏排版（即文字流连续、跨栏断行），应改用 <strong>CSS Multi-column Layout（多列布局）</strong>，它专为文本流分栏设计，支持内容在列间自动平衡与断行。</p> <p>✅ 正确做法：启用 <code>column-count 并移除 Flexbox 布局
以下是最简可靠配置：

#texts {
  column-count: 2;        /* 明确分为两栏 */
  column-fill: auto;       /* 内容优先均匀填充（非强制等高）*/
  column-gap: 1em;         /* 栏间距，替代 margin/padding 的冗余设置 */
  width: 300px;
  height: 300px;           /* 必须设定明确高度或 max-height，否则列数可能失效 */
  background-color: yellow;
  font-size: 15px;
  line-height: 1.5;        /* 推荐添加，提升可读性 */
}

#texts > div {
  text-indent: 1em;        /* 段首缩进仍生效 */
  break-inside: avoid;     /* 关键！防止段落被强行断在两栏之间 */
}

? 注意事项：

height 或 max-height 是必需的：多列布局依赖容器高度来计算列高，若高度不固定（如 min-height 单独存在），浏览器可能忽略分栏或行为异常；
break-inside: avoid 防止段落被截断：确保每个 <div> 作为逻辑段落整体保留在同一栏内（这是语义化排版的基本要求）； <li> <strong>避免对子元素设置 <code>width: 50%：多列布局中子元素默认宽度为 100% 容器宽，其内容会自动流入各列，显式设宽反而破坏流式行为；
兼容性良好：现代浏览器（Chrome 50+、Firefox 52+、Safari 10.1+、Edge 79+）均原生支持，无需前缀。

? 进阶提示：如需更精细控制（如首栏略宽、响应式单/双栏切换），可结合 @media 查询或 column-width（基于最小列宽自适应列数）使用。但对确定双栏场景，column-count: 2 是最简洁、语义最清晰的选择。