优先选 column-width：它让内容自适应容器宽度，响应式更可靠；column-count 则强制分几列，窄屏下容易产生超窄列或横向滚动。
多列文本用 column-count 还是 column-width？
二者不能共存，浏览器会忽略后声明的那个。实际开发中优先选 column-width：它让内容自适应容器宽度，响应式更可靠；column-count 则强制分几列，窄屏下容易产生超窄列或横向滚动。
常见错误是写成：column-count: 3; column-width: 150px;——此时 column-count 生效，column-width 被丢弃。
- 想固定列数（如打印样式），用
column-count - 想保证每列可读宽度（如新闻正文），用
column-width - 两者都设时，以 CSS 书写顺序为准，后写的生效
文字跨列断裂、标点孤悬怎么修？
CSS 多列默认不处理断行语义，中文常出现单个标点在行首、或“的”“了”单独占一行。需手动启用语言敏感断行：
column-break-inside: avoid; 防止段落被硬切成两列（但对 inline 元素无效）；真正起作用的是：
立即学习“前端免费学习笔记（深入）”；
-
hyphens: auto;+ 指定lang="zh"属性，触发浏览器中文连字符逻辑（Chrome/Firefox 支持较好） -
word-break: keep-all;阻止中文在字间断行（比normal更保守） - 避免在
GNCMS可视化拖拽公司网站模板1.0.0下载高端网络建设公司设计类网站模板 IT互联网移动建站类网站源码(带手机版数据同步)本套模板采用现在非常流行的全屏自适应布局设计，且栏目列表以简洁，非常时尚大气。后台支持可视拖拽编辑。 模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。4、后台直接修改联系方式、传真、邮箱、地址等，修改更加方
或，它们可能被截断到不同列
图片/块级元素卡在列中间出不来？
默认情况下，
解决方法只有两个：
- 加
break-inside: avoid;—— 强制该元素不跨列，但它会整体挪到新列开头（适合小图） - 改用
display: inline-block;+vertical-align: top;—— 让图片变成行内流体，随文字自然分布（适合图文混排） - 绝对不要给多列容器设
height，否则内容溢出直接被裁剪
Firefox 和 Safari 对 column-rule 渲染不一致？
是的。column-rule 在 Firefox 中始终居中于列间隙，Safari（尤其旧版）会偏右几像素，且 column-rule-style: dashed 在 Safari 中可能显示为实线。
稳妥做法：
多列布局真正的难点不在写法，而在内容不可控——用户粘贴的 Word 文档、带内联样式的富文本、未闭合的 HTML 标签，都会让 column-fill 行为失常。上线前务必用真实数据压测。
