CSS3布局：多列布局、分栏

以前，如报纸类型排版，要用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还是挺多的。