column-width未生效主因是父容器未设width或非块级元素，且必须配合column-count或自身触发；flex/grid父容器中该属性完全失效。
column-width 设置后文字没分栏，是哪里没生效？
多数情况是父容器缺少 column-width 必需的触发条件：它只对块级元素生效，且不能作用于替换元素（如 <img>）或设置了 display: inline 的元素。更关键的是，浏览器默认不会自动启用多列布局——你必须显式指定最小列宽或列数，否则内容仍按单列流式渲染。
实操建议：
- 确保父容器是块级元素（如
<div>、<code><p></p>、<section></section>），且未被display: inline或float干扰 - 至少设置
column-width或column-count其中一个；只设column-gap或column-rule不会触发分栏 - 避免在父容器上同时使用
flex或grid布局，它们会覆盖 column 行为 - 检查是否被 CSS 重置库（如 normalize.css）清除了默认块级表现
- 响应式场景优先用
column-width：比如设column-width: 150px，在手机上可能只有一列，在桌面端自动变成三列 - 固定排版需求（如杂志式设计）用
column-count：设column-count: 3就一定三列，哪怕最后一列几乎空着 - 两者共存时，若容器太窄导致无法满足
column-width最小要求，浏览器会减少列数，甚至退化为单列——这不是 bug，是规范行为 - 用
break-inside: avoid防止段落被切到两列之间（加在p或h2上） - 首行缩进失效？别用
text-indent，改用padding-left或伪元素::first-line更可靠 - 图片撑破列宽？给
img加max-width: 100%和height: auto，再配合break-inside: avoid - 段间距（
margin-bottom）在列间会叠加，可改用column-gap统一控制列间距，再微调段内margin - 用
@supports (column-width: 100px)包裹分栏样式，老浏览器直接跳过 - 降级 fallback：对不支持的 UA，用媒体查询 +
display: block恢复单列，保留可读性 - 不依赖 JS 检测，避免 FOUC；也不推荐引入 column-fill 或 column-span 等复杂特性，兼容成本过高
- 移动端 iOS Safari 10.3+ 已稳定支持，重点只需处理桌面端 IE11 和 macOS Safari 9
column-width 和 column-count 同时设置时，谁起主导作用？
column-width 是“期望宽度”，浏览器会根据容器宽度和该值，尽可能多地铺开列，但每列宽度不严格等于该值（可能略大或略小）；column-count 是“强制列数”，优先级更高——只要空间允许，它会强行切出指定数量的列，此时 column-width 仅作为最小宽度参考，实际列宽会被重新计算。
常见现象与选择建议：
分栏后首行缩进、段间距或图片错位怎么调？
分栏本质是将内容流切成多列并列显示，但段落（<p></p>）、标题（<h2></h2>）等块级元素默认仍保持完整，不会跨列断裂；而内联元素（如文字、<span></span>）会自然流动。问题通常出在「块级元素打断规则」和「断行控制」上。
关键修复点：
IE 和旧版 Safari 对 column-width 支持差，有没有轻量降级方案？
column-width 在 IE10+ 有基本支持（需 -ms-column-width），但 Safari 9 及更早版本对 break-inside 等控制属性支持极弱。纯 CSS 降级很难做到视觉一致，但可避免完全崩坏。
务实做法：
真正麻烦的不是写几行 column-width，而是当内容里混着表格、浮动元素、绝对定位子元素时，它们会脱离分栏流——这种情况下，要么重构结构，要么老老实实放弃分栏，用 JS 分块再渲染。CSS columns 适合纯文本流，别强塞复杂布局。
