column-width未生效主因是父容器未设width或非块级元素，且必须配合column-count或自身触发；flex/grid父容器中该属性完全失效。
column-count 和 column-width 是排版分栏文字最直接有效的 CSS 属性，但它们只对纯文本流起作用——不是所有“看起来像分栏”的场景都该用它。
为什么 column-width 设了却没分栏？
多数情况是父容器没满足触发条件：它必须是块级元素（如 <div>、<code><article></article>），且不能被 display: flex 或 display: grid 覆盖。浏览器不会自动启用多列布局，你得显式告诉它“要分”。
- 检查父容器是否意外设了
display: inline、float或被重置库清除了块级表现 - 至少设置
column-width或column-count其中一个；只设column-gap或column-rule不会触发分栏 - 避免在父容器上同时用
flex/grid——它们和columns互斥，后者直接失效
column-count 和 column-width 到底选哪个？
看你要的是“确定数量”还是“适应宽度”：
-
column-count: 3强制三列，哪怕最后一列空着也照切——适合杂志、PDF 导出等固定排版 -
column-width: 180px是“最小宽度”，浏览器按容器实际宽度算出最多能放几列，手机上可能单列、桌面变四列——更适合响应式新闻页 - 两者共存时，
column-count优先级更高；但若容器太窄容不下column-width所需的最小列宽，浏览器会降级为更少列数甚至单列
分栏后段落错位、图片撑破、首行缩进消失怎么办？
分栏本质是把内容流切成并列列，但块级元素（如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<h2></h2>、<img>）默认仍保持完整，不跨列断裂。问题就出在这里。
- 防段落被切到两列之间：给
p或h2加break-inside: avoid - 首行缩进别用
text-indent，改用padding-left或::first-line伪元素更稳 - 图片加
max-width: 100%+height: auto+break-inside: avoid；如果还跨列，得用display: inline-block包一层再设 - 段间距（
margin-bottom）在列间会叠加，建议统一用column-gap控制列间距，段内留白微调即可
什么时候不该用 columns？
当你要控制每栏内容结构（比如左栏导航、右栏正文）、图文混排需要精确定位、或标题必须横跨全宽时，columns 就力不从心了。它只处理文本流，不管理区块布局。
- 要做“视觉分栏”（如卡片列表、后台侧边栏+主区），直接上
display: flex或display: grid - 报纸式排版（标题跨栏、图文分区）别碰
column-span，它在真实项目里基本等于禁用；改用grid-column: 1 / -1控制跨越 - 兼容 IE9 及更早？那只能退到
float+ 清除浮动，但仅限兜底，别当主力方案
真正容易被忽略的一点：分栏不是样式开关，它是内容流的重新组织方式。一旦用了 columns，你就不能再指望 height 或 overflow 在父容器上按常规方式生效——它的高度由列高自动计算，且无法用 JavaScript 精确读取每列内容高度。
