column-count 不是“让 div 变成多列”的开关，它只对块级容器里的连续文本流生效；需满足 display 为 block/inline-block、有足够高度、无 overflow: hidden 裁剪、父元素非 flex/grid，且 column-width 比 column-count 更适配响应式。
column-count 不是“让 div 变成多列”的开关，它只对块级容器里的连续文本流生效。想靠写个 <div class="columns"><p>文字</p></div> 就自动分栏？大概率没反应——不是代码错，是前提没满足。
为什么 column-count 什么都没发生？
浏览器压根不触发多列布局，通常卡在这四个硬性条件上：
-
display必须是block或inline-block；设成flex、grid、table或inline，column-count直接被忽略 - 容器得有“高度”：内容太少（比如只有两行）或没设
min-height，浏览器认为没必要分栏，直接放弃 -
overflow: hidden会把第二列之后的内容裁掉，看起来像“没生效”，其实是被截断了 - 父元素如果是
display: flex或display: grid，子元素的文本流被接管，column-count失效
column-width 比 column-count 更适合响应式
固定列数在小屏上容易翻车：column-count: 3 在手机上会让每列窄到 80px，字挤成一团，行高错乱。用 column-width 让浏览器自己算列数更稳：
.article {
column-width: 16rem; /* 主力参数，浏览器据此推算列数 */
column-gap: 1.5rem; /* 间隙必须显式设，否则默认 1em 太小 */
column-rule: 1px solid #eee; /* 分隔线不占宽度，但 gap 得留够空间 */
}
这样窄屏下自动退化为单列，宽屏自然铺开 2–3 列，不用写一堆 @media 覆盖。
别拿 float 或 table 冒充多列布局
它们只是“视觉上摆成多列”，本质是多个独立块：
- 文本不会跨列流动，复制粘贴会断句，打印预览错乱
-
table违反语义——它是为结构化数据设计的，W3C 明确反对用它做页面布局 -
float需要clear清除、易塌陷、overflow: hidden副作用难排查 - 响应式时列宽无法随屏幕缩放自适应，只能靠 JS 强行重排
真正多列布局的核心就一条：让一段连续文本，在块级容器里按宽度/列数自动折行分栏。其他所有“多列”方案，都是在模拟这个效果，但代价是语义丢失、维护成本上升、响应式变脆弱——这点很容易被忽略，直到上线后用户用 iPad 打开页面才发现文字糊成一片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
