column-count 会无视语义块强制切分内容，导致标题或图片被劈开；需用 break-inside: avoid 保护不可分割元素，响应式优先选 column-width，二者不可同时设具体值。

直接用 column-count 就能分列，但内容会自动重排、断行不可控，实际排版中常出现标题被劈开、图片错位、列表项断裂等问题。

column-count 为什么会让标题或图片“断在中间”

浏览器把整个容器当作文本流统一切分，不识别语义块。比如一个

加一段

，可能

被切到第1列底部，

跑到第2列顶部。

• 默认不阻止元素跨列断裂，break-inside: avoid 才能保护整块内容
• 、
  、
  这类块级元素必须显式加 break-inside: avoid
• Flex/Grid 容器内部的子元素不受 column-count 影响——多列只作用于普通文档流内容

column-count 和 column-width 的关键区别

column-count 是“强制分几列”，不管容器宽窄；column-width 是“每列至少多宽”，浏览器按需生成列数（可能 1 列，也可能 5 列）。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 响应式场景优先用 column-width：比如设 column-width: 18em，小屏变 1 列，大屏自动扩为 2–3 列
• 固定栏数需求才用 column-count，但要搭配 column-gap 控制间距，否则默认只有 1em 缝隙，显得拥挤
• 两者不能同时设为具体值，否则 column-width 会失效（浏览器以 column-count 为准）

常见断裂问题的修复写法

不是所有元素都需要加防护，只对语义上“不可分割”的容器加 break-inside: avoid。

article h2,
article p,
article img,
article ul,
article blockquote {
  break-inside: avoid;
}

• 注意：IE 不支持 break-inside，要用 -webkit-column-break-inside: avoid 兼容 Safari 旧版本
• break-before: avoid 可防止某元素出现在列首（比如不想让
  单独占一列顶部）
• 若某段文字必须保持完整不换列，可包一层

真正难处理的是嵌套列表、浮动元素或含 position: absolute 的提示框——这些会脱离文档流，多列布局完全无法约束它们的位置。遇到这类结构，要么重构为纯流式 HTML，要么放弃 column-count 改用 CSS Grid 手动分栏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！