column-count 会无视语义块强制切分内容，导致标题或图片被劈开；需用 break-inside: avoid 保护不可分割元素，响应式优先选 column-width，二者不可同时设具体值。
直接用就能分列，但内容会自动重排、断行不可控，实际排版中常出现标题被劈开、图片错位、列表项断裂等问题。
column-count 为什么会让标题或图片“断在中间”
浏览器把整个容器当作文本流统一切分，不识别语义块。比如一个
加一段
，可能
被切到第1列底部，
跑到第2列顶部。
默认不阻止元素跨列断裂，
才能保护整块内容
、
、
这类块级元素必须显式加
Flex/Grid 容器内部的子元素不受
影响——多列只作用于普通文档流内容
column-count 和 column-width 的关键区别
是“强制分几列”，不管容器宽窄；
是“每列至少多宽”，浏览器按需生成列数（可能 1 列，也可能 5 列）。
响应式场景优先用
：比如设
，小屏变 1 列，大屏自动扩为 2–3 列
固定栏数需求才用
，但要搭配
控制间距，否则默认只有 1em 缝隙，显得拥挤
两者不能同时设为具体值，否则
会失效（浏览器以
为准）
常见断裂问题的修复写法
不是所有元素都需要加防护，只对语义上“不可分割”的容器加
。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
注意：IE 不支持
，要用
兼容 Safari 旧版本
可防止某元素出现在列首（比如不想让
单独占一列顶部）
若某段文字必须保持完整不换列，可包一层
真正难处理的是嵌套列表、浮动元素或含
的提示框——这些会脱离文档流，多列布局完全无法约束它们的位置。遇到这类结构，要么重构为纯流式 HTML，要么放弃
改用 CSS Grid 手动分栏。
column-countbreak-inside: avoid
break-inside: avoidcolumn-countcolumn-countcolumn-widthcolumn-widthcolumn-width: 18emcolumn-countcolumn-gapcolumn-widthcolumn-countbreak-inside: avoidarticle h2,
article p,
article img,
article ul,
article blockquote {
break-inside: avoid;
}break-inside-webkit-column-break-inside: avoidbreak-before: avoidposition: absolutecolumn-count