column-count 设置的列数仅是目标值，实际列数由容器宽度和column-width共同决定；在Flex/Grid容器中失效，需嵌套容器或改用Grid；需配合break-inside: avoid等控制断行，并注意可访问性与打印样式。

column-count 设置多少列才真正生效

直接写 column-count: 3 不一定出现三列，浏览器会优先保证单列最小宽度（通常约 250px），如果容器太窄，它会自动降为 2 列甚至 1 列。

要强制撑出指定列数，必须配合 column-width 或确保父容器足够宽：

• column-count 是“目标列数”，不是硬性约束；column-width 才是实际分栏的触发阈值
• 若同时设了 column-width 和 column-count，浏览器取两者中更优先满足的：先按 column-width 尝试分栏，再用 column-count 限制最多几列
• 常见误操作：只设 column-count: 4，但容器宽度不到 1000px，结果还是显示成 2 列

column-count 在 Flex/Grid 容器里失效怎么办

column-count 只对块级流内元素起作用，一旦父容器是 display: flex 或 display: grid，子元素就脱离了普通文档流，多列布局直接被忽略。

解决办法只有两个：

立即学习“前端免费学习笔记（深入）”；

• 把多列样式加在**最内层内容容器**上（即 flex/grid 的直接子元素内部再包一层 <div>，并对它设 <code>column-count）
• 放弃 column-count，改用 CSS Grid 模拟多列（例如 grid-template-columns: repeat(3, 1fr)），但语义和断行行为完全不同
• 注意：不能对 display: inline 或 display: table 元素使用 column-count

column-count 分栏后内容被截断或错位

典型现象是文字突然在中间断开、图片卡在列底、标题孤悬一列顶部——这是默认断行策略导致的。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载

关键修复项集中在 break-inside 和 break-before：

• 给不希望被拆开的块级元素（如 <p></p>、<section></section>）加 break-inside: avoid
• 想让某个标题始终跟在上一节后面（不单独成列首），加 break-before: avoid
• 图片默认可断行，需额外加 break-inside: avoid + display: block 才能锁住位置
• Chrome 对 break-inside: avoid 支持较好，Safari 旧版本可能部分失效，可加 -webkit-column-break-inside: avoid 兼容

column-count 的性能和可访问性隐患

多列布局不是纯视觉装饰，它会改变 DOM 内容的阅读顺序（从上到下、从左到右 → 按列依次读），这对屏幕阅读器和 SEO 很关键。

几个容易被跳过的现实问题：

• 搜索引擎仍按 HTML 顺序抓取，但用户看到的是视觉分列后的效果，语义与呈现错位
• 滚动时，长列可能导致“滚动卡顿”，尤其在 iOS Safari 上，建议限制总高度或加 overflow-y: auto 在容器上
• 打印样式表中 column-count 默认失效，如需打印多列，得单独写 @media print { column-count: 2 }
• 没有原生的“列平衡”控制（比如让各列高度严格相等），column-fill: balance 是唯一选项，但它仅在内容一次性渲染完成时有效，动态加载内容后不会重平衡

column-count 看似简单，真正用稳需要同时盯住容器流、断行规则、渲染上下文和辅助技术反馈——任何一个环节松动，都会让“三列”变成“三列半”或者“看不见的第三列”。