column-count无效是因为容器不满足触发条件：必须是块级元素、有足够高度或内容撑开、不能设overflow:hidden，且不能是flex/grid/float布局。
column-count 设了没反应？不是属性写错了，是容器没满足触发条件。
为什么 column-count 无效
浏览器只在特定条件下才启用多列渲染：容器必须是块级元素、有明确高度或足够内容撑开、且不能被 overflow: hidden 截断列溢出。常见失效场景包括：
- 父容器是
display: inline或浮动元素（float） - 内容太短，总高度小于单列默认高度（比如只有两行文字）
- 容器设置了
overflow: hidden，把第二列之后的内容直接裁掉了 - 同时给容器设了
display: flex或display: grid—— 这两种布局会完全接管子元素流式行为，column-count被忽略
column-count 和 column-width 怎么选
二者语义不同，适用场景也不同：
-
column-count: 3是“硬分三列”，窄屏下文字会被压缩，可读性差，仅适合固定列数的打印样式或后台报表 -
column-width: 16rem是“每列至少这么宽”，浏览器自动算列数，小屏退化为单列，响应更自然 - 两者同时存在时，
column-width是最小宽度底线，column-count是列数上限，最终列数由容器宽度和内容长度共同决定
跨列标题和图片错位怎么修
column-span: all 能让标题横跨所有列，但必须满足两个硬条件：作用对象是多列容器的**直系子元素**，且当前浏览器支持（Safari 17 及更早版本不支持）。图片、表格等替换元素容易被切在列中间，用 break-inside: avoid 阻止：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
h2 {
column-span: all;
}
p, img, figure, table {
break-inside: avoid;
}
注意：break-inside: avoid 在 iOS 14 以下 Safari 中不稳定，必要时加前缀 -webkit-column-break-inside: avoid。
真正容易被忽略的细节
多列布局不是“设个属性就完事”。它会让 ::first-line 和 ::first-letter 只对第一列生效；列表项可能被拆到不同列导致语义断裂；链接焦点状态在滚动时可能丢失；打印预览中列宽会重排。这些都不会报错，但用户阅读体验会明显变差——判断是否该用多列，比怎么写更重要。
