设column-count无反应主因是容器未设height或内容不足；需确保块级容器、足够内容、无overflow:hidden截断，且避免与flex/grid混用。
column-count 为什么设了没反应
直接写 column-count: 3 却看不到分列，大概率是容器没设置 height 或内容太少，浏览器默认按需分配列高。CSS 多列布局依赖「块级容器」和「足够内容」才能触发渲染，display: inline 或 float 元素会失效。
- 确保父容器是块级（如
div、p），且未被overflow: hidden截断列溢出 - 内容长度至少要超过单列高度，否则所有文字挤在第一列
- 避免对多列容器同时设置
flex或grid布局，二者不兼容
column-count 和 column-width 怎么选
column-count 强制列数，column-width 指定最小列宽（浏览器自动算列数）。实际项目中优先用 column-width，响应更自然；只有明确要求“必须三列”才用 column-count。
-
column-count: 3：不管容器多宽，硬分三列，窄屏下文字被压缩，可读性差 -
column-width: 150px：宽度够就多列，窄屏自动退化为单列，更适合移动端 - 两者同时存在时，
column-width是最小值，column-count是上限，浏览器取交集
跨列标题怎么实现
HTML5 原生不支持某一段文字横跨所有列，但可用 column-span: all 实现——它只在 Firefox/Chrome/Edge 有效，Safari 目前不支持（截至 Safari 17）。
h2 {
column-span: all;
margin: 1em 0;
}
- 必须作用于多列容器的**直系子元素**，嵌套一层
div就失效 - 该元素会脱离当前列流，单独占据一行，高度计入容器总高
- 若需兼容 Safari，只能用 JS 计算列高后手动插入 DOM，或改用 CSS Grid 模拟
分列后图片/表格错位怎么办
默认情况下，img、table 等替换元素可能被切在两列之间。用 break-inside: avoid 可阻止分页/分列断点出现在元素内部。
立即学习“前端免费学习笔记（深入）”；
p, img, table {
break-inside: avoid;
}
- 注意：IE 完全不支持
break-inside，老项目需降级处理 -
break-before: avoid和break-after: avoid分别控制前后是否断列 - 对
figure这类语义化容器加样式，比单独选img更稳妥
