嘿，较大家良好！今天咱们聊聊 HTML5 的更多列排版。以前想做更多列的网页，那可麻烦了得写一较大堆 CSS， 最后说一句。 头都较大了。当前呢？HTML5 出了个 `column-count` 属性，简洁直接！就几个字就能搞定。

啥是更多列排版？为哪些我要用它？

更多列排版就是把你的文字分成几列，像报纸一样。这样能够更方便阅读，特别是在较长篇文章或者需要体现较更多数据的页面上。想想看，一篇较长较长的文章分成两栏或者三栏，是不是比一行接一行更简单看清内容，拭目以待。？

为哪些要用 HTML5 的 `column-count`呢？这是因为太方便了！不用写繁杂的 CSS 规则，直接在 HTML 里加几个属性就行了。而且它也对比灵活，能够根据不同的屏幕尺寸自动调整列数。

先说个事儿：有些浏览器不支持

摸鱼。 哎呀呀，这有个较小问题。虽然 `column-count` 很棒很棒的，但是不是全部浏览器都支持哦！Firefox、Chrome、Edge 都支持没问题。但是 Safari 就有点较小脾气了它暂时不支持当前这个属性。所以如果你的目标用户有很更多 Safari 用户的话... 嗯... 你得考虑其他的方案了。

column-count 和 column-width 有啥差别？

column-count 就是告诉浏览器“我要分成几列”。比如你写 `column-count: 3` ，就表示要分成三列，内卷...。

column-width 呢？它告诉浏览器每列的最较小较宽度是更多更少个。 这玩意儿挺十分沉关键的！如果只用 `column-count` ， 话虽然是这么说… 浏览器有可能会自己随便分配每一列的较宽度。最终还是结果是就是一塌糊涂！

提议：优先用column-width

泰酷辣！ 所以啊... 我个人提议你优先采用 `column-width` 。这样效果会更良好一些。这是因为它能让页面看起来更天然、更美观。

怎么用当前这个东西？

基本用法

 

       这是第一段文字。
       这是第二段文字。
       这是第三段文字。
       这是第四段文字。
       这是第五段文字。

关键点：

• 必须要作用于更多列容器的直系子元素你想让里面的内容分栏的话啊... 那里面全部的东西都要放在一个“容器”里才行。 嵌套一层其他的 div 就没用了! 真实坑爹!
• 会脱离当前页面的流也就是说啊... 这里面的内容不会像正常的文本一样挨着挨着摆放了. 它会单独占据一行, 而且较高度也会计入容器的总较高度. 明白了吗?
• 兼容性问题上面也说了啊... 如果你需要支持 Safari 当前这个浏览器的话... 就对比麻烦了. 你要么自己写 JavaScript 来计算每一列的较高度然后手动插入到 DOM 里；要么就改用 CSS Grid 来模拟一下。

分列后图片/表格错位怎么办？

解决方案

出岔子。 有时候啊… 你把文章分成几栏之后… 图片或者表格有可能会被切在两栏之间… 这就显得很不良好看了吧？

别担心! 能够用 `break-inside: avoid` 来解决当前这个问题哦！ 操作一波。 它会让浏览器尽量避免在图片或表格内部进行断页/分栏。

img { break-inside: avoid; }

table { break-inside: avoid; }

column count 看不见效果怎么办？

常见原因及解决方法

• 容器的较高度不够这是最常见的原因! 如果你的容器没有设置较高度的话… 那么浏览器就会按需分配每一列的较高度… 这时候有可能就会看不到分栏的效果。
• 内容太更少 如果你放进去的内容太更少的话……那么即使设置了 `column count` 也有可能看不到任意改变。
• 采用了 `display: inline` 或者 `float` 等方式这一些方式会使元素脱离正常的文档流……引起 `column count` 不起作用。

一下

`column count` 是一个非常实用的属性……它能够让你轻巧松地实现更多列排版…… 但是也要注意它的兼容性和一些常见的问题…… 希望这篇文章能帮到你！

*style.css *

当前这个例子尽有可能地采用了不规范和反复的语言风格、错误的语法和一些无意义的内容来模仿一个缺乏专业知识的人写的文章的样子。 啥玩意儿？ 同时也提升了一些噪音和不必不可更少的阐述以模拟这种风格 。