columns属性不生效主因是容器缺乏块级上下文与足够高度或宽度：需确保display为block、内容形成连续块级流，且width/height满足column-count或column-width要求；column-width更适配响应式，column-count适用于固定版式。
columns属性不生效？检查是否遗漏了内容高度或强制换行
HTML元素默认不会因columns自动撑开分栏区域，常见现象是文字挤在第一栏、后续栏为空。根本原因是：CSS多列布局要求容器有明确的**块级上下文**和**足够高度（或显式宽度+高度）**才能触发分栏计算。
实操建议：
- 确保父容器是块级元素（如
div），且未设置overflow: hidden或height: 0等抑制布局的样式 - 若内容为纯文本，加
word-break: break-word或hyphens: auto避免长单词卡住分栏 - 对
p、span等内联元素直接设columns无效，必须包裹在块容器中 - 调试时临时加
border: 1px solid red看容器实际渲染范围，常会发现容器高度为0
column-count vs column-width：优先用哪个？
column-count指定栏数，column-width指定每栏最小宽度——二者不能同时设为固定值，浏览器会按规则舍弃其中一个。实际项目中推荐以column-width为主，它更适配响应式场景。
原因和选择逻辑：
-
column-width: 12rem会让浏览器在可用空间内尽可能多地铺开栏，窄屏变1栏、宽屏自动扩到3–4栏，无需媒体查询 -
column-count: 3在小屏上强行三栏会导致文字过窄、行宽不足，阅读体验差 - 若必须固定栏数（如打印PDF），再用
column-count，并配合column-gap控制间距 - 注意：
column-width是“最小宽度”，不是精确宽度；最终栏宽由容器宽度和column-gap共同决定
跨栏标题（column-span）在Chrome/Firefox表现不一致？
column-span: all能让标题横跨所有栏，但Safari至今不支持，Firefox对display: table类元素支持不稳定，这是最易踩的兼容性坑。
绕过方案：
- 只对
h1–h6这类块级标题使用column-span，避免套在span或div里 - 给标题加
break-before: column实现“另起一栏”的视觉效果，虽不跨栏但能隔离标题与正文 - 服务端或JS判断
!window.CSS.supports('column-span', 'all')，降级为单栏居中标题 - 绝对不要依赖
column-span做关键布局，它本质是装饰性增强
分栏后图片/表格错位或被截断？
默认情况下，图片、表格等block级替换元素会被强制放入单栏，导致右侧留白或底部悬空。这不是bug，而是规范定义的行为。
处理方式取决于内容语义：
- 若图片是正文插图，加
break-inside: avoid阻止它被拆到两栏之间 - 若想让图片占满整栏宽度，设
width: 100%+max-width: none（防止column-width限制） - 表格慎用
column-span，容易破坏结构；更稳妥的是用display: block+overflow-x: auto横向滚动 - 绝对定位元素（如浮动按钮）会脱离分栏流，需用
position: relative在栏内重新定位
多列布局不是万能网格系统，它专为连续文本设计。一旦混入大量非文本块，就得权衡：要么重构内容流，要么换Flex/Grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
