以前,如报纸类型排版,要用CSS动态实现其实是比较困难的,因为内容是动态的,每个div显示多少文字是很难控制的。现在CSS3提供了个新属性columns用于多列布局,下面我们就来详细看看。

正文

一、column-count

指定了需要分割的列数;
语法:column-count: number | auto;

<div class="box">
    FaxMiao个人博客是一个web前端行业的技术博客,一个关注Web前端开发技术、关注用户体验、记录前端点滴,坚持更多原创,为大家提供高质量技术博文!
</div>
.box {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

效果图:
在这里插入图片描述

二、column-gap

指定列之间的像素差距;
语法:column-gap: length | normal;

.box {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;

    column-gap: 50px;
    -moz-column-gap: 50px;
    -webkit-column-gap: 50px;
}

效果图:
在这里插入图片描述

三、column-rule

指定列之间的规则:宽度,样式和颜色;
语法:column-rule: column-rule-width column-rule-style column-rule-color;
column-rule与border同理,这三个属性里,除style不能省略,width和color都可以省略其中之一或都省略,浏览器会使用默认的width或color。

.box {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;

    column-gap: 50px;
    -moz-column-gap: 50px;
    -webkit-column-gap: 50px;

    column-rule: 5px solid #f00;
    -moz-column-rule: 5px solid #f00;
    -webkit-column-rule: 5px solid #f00;
}
  • column-rule-width:设置列中之间的宽度规则
    语法:column-rule-width: thin | medium | thick | length;
column-rule-width: 100px;
-moz-column-rule-width: 100px;
-webkit-column-rule-width: 100px;
  • column-rule-style:设置列中之间的样式规则
    语法:column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
column-rule-style: solid;
-moz-column-rule-style: solid;
-webkit-column-rule-style: solid;
  • column-rule-color:设置列中之间的颜色规则
    语法:column-rule-color: color;
column-rule-color: #FF0000;
-moz-column-rule-color: #FF0000;
-webkit-column-rule-color: #FF0000;

效果图:
在这里插入图片描述

四、column-width

指定列的宽度;
语法:column-width: auto | length;

.box {
    column-width: 100px;
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
}

效果图:
在这里插入图片描述

五、column-span

指定某个元素应该跨越多少列,火狐浏览器不支持
语法:column-span: 1 | all;

<div class="box">
    <h2>记录前端点滴,坚持更多原创</h2>
    FaxMiao个人博客是一个web前端行业的技术博客,一个关注Web前端开发技术、关注用户体验、记录前端点滴,坚持更多原创,为大家提供高质量技术博文!
</div>
.box {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

.box h2 {
    column-span: all;
    -webkit-column-span: all;
}

效果图:
在这里插入图片描述

六、column-fill

指定如何填充列,主流浏览器都不支持
语法:column-fill: balance | auto;

.box {
    column-fill:auto;
}

七、columns

指定列的宽度和数量,column-width和column-count的简写;
语法:columns: column-width column-count;

.box {
    columns:100px 2;
    -moz-columns:100px 2;
    -webkit-columns:100px 2;
}

总结

columns属性最大的问题还是浏览器兼容性问题,如:column-fill主流浏览器都不支持;而且竖版排列用到的地方确实不多,目前这个属性被用的很少,但在需要自动平衡列高度的地方,用columns还是挺多的。