HTML常使用的布局方法——多列布局

CSS3中提供的新属性columns，是用于多列布局的。

在这之前，有些大家习以为常的排版，要用CSS动态实现其实是比较困难的。如下方的排版，类似于报纸排版：

在不知columns属性之前，这种效果想想确实很难实现，因为内容是动态的。搞div容易，但每个div内放多少文字呢？一篇文章该在哪行哪段剪切进不同的div内呢？你肯定不愿意为每一段文字，都在特定的地方插入div标签，简直要疯了。而使用columns它可以让浏览器确定何处结束一列和开始下一列，简单的说，就是CSS3多列布局可以自动将内容按指定的列数排列。多列布局的主要属性有：

column-width: 类似于给列定义一个最小宽度

column-count: 指定想要的列数或者说是最大列数

column-gap: 定义列间距，相当于margin属性

column-rule: 定义列边框，相当于border，不过它不占任何空间

column-span: 定义多列布局中子元素的跨列效果

column-fill: 控制每列的列高应该是一样的还是自适应的，浏览器支持情况较差。不建议使用

属性的详细介绍：

column-width给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。

column-count最大列数，不赘述。

通常上面两个参数都合并在columns中一起指定。

column-gap是列间距，默认值normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于总宽度的话，就无法显示column-count指定的列数，会被浏览器自动调整列数和列宽

column-rule用于设置列的边框，类似于border，区别是不占用任何空间，因此设了column-rule不会导致列宽的变化。另外如果边框宽度大于column-gap列间距，将不会显示边框。语法和border类似，例如column-rule: 1px solid #000;。效果见例子页面。

column-span用于跨列，默认值none表示不跨列，all表示跨越所有列。例如文章标题可以设成all来跨列。效果见例子页面

column-fill用于统一列高。默认值auto各列的高度随内容自动调整，balance所有列高都设为最高的列高；

下面上一段代码，实现的效果如下：

HTML架构如下

scc的设置如下：

多列布局先介绍到这里，如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。

您赞就是是我最大的动力！！！