多列布局——Columns

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。

语法：

columns：<column-width> || <column-count>

举例：要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

到目前为止大部分主流浏览器都对其支持：

CSS3 多列属性

本章节我们将学习以下几个 CSS3 的多列属性:

• column-count

• column-gap

• column-rule-style

• column-rule-width

• column-rule-color

• column-rule

• column-span

• column-width