CSS3 多列布局（20160904-0035）

一、早期多列布局问题

我们有时想布局成报纸、杂志那样的多列方式（至少两列，一般三列以上），但早期 CSS 提供的布局都有着极大的限制。如果是固体布局，那么使用浮动或定位布局都可以完成。但对于流体的多列，比如三列以上，那只能使用浮动布局进行，而它又有极大的限制。因为它是区块性的，对于动态的内容无法延伸自适应，基本无能力。

二、属性及版本

CSS3 提供了 columns 多列布局属性等7个属性集合，具体如下：

属性说明columns集成 column-width 和 column-count两个属性column-width定义每列宽度column-count定义分列列数column-gap定义列间距column-rule定义列边距column-span定义多列布局中子元素跨列效果，firefox 不支持column-fill控制每列的列高效果，主流浏览器不支持由于 column 属性集尚未纳入标准，大多数浏览器必须使用厂商前缀才能访问，好在主流的浏览器都可以很好的支持了。下面是主流浏览器的支持和前缀情况。 OperaFirefoxChromeSafariIE支持需带前缀11.5 ~ 292 ~ 404 ~ 453.1 ~ 8无支持不带前缀无无无无10.0+通过上面的表格，我们了解到，想要让最新的浏览器全部实现效果，都必须使用前缀。

@charset "utf-8";div{/* 复合属性，设置分列宽度和分列列数 *//*-webkit-columns: 150px 3;*//* 设置每列的宽度，如果只设置具体的宽度，不设置列数，浏览器自动调整显示列数 *//*-webkit-column-width: auto;*//* 提示：设置具体宽度 300px，当浏览器缩放到小于 300px 时，将变成2列或1列显示。如果是 auto 的话，保持3列显示 */-webkit-column-width: 300px;/* 设置多少列 *//*-webkit-column-count: auto;*/-webkit-column-count: 3;/* 设置列间距 */-webkit-column-gap: auto;-webkit-column-gap: 50px;/* 每列中间的分割线，当页面缩小时，分割线自动调整显示不显示，语法同 border */-webkit-column-rule: 2px silver solid;/* 设置跨列大标题 */-webkit-column-span: all;}

三、属性解释

1、columns

解释：columns 是一个复合属性，包含 column-width 和 column-count 两种简写，意味同时设置分列宽度和分列列数。

2、column-width

解释：用于设置每列的宽度。

属性值说明auto默认值，自适应。长度值设置列宽3、column-count

解释：用于设置多少列。

属性值说明auto默认值，表示就 1 列。数值设置列数4、column-gap

解释：用于设置列间距。

属性值说明auto默认值数值设置列间距5、column-rule

解释：设置每列中间的分割线。

属性属性column-rule<宽度><样式><颜色>的边框简写形式column-rule-width单独设置边框宽度column-rule-style单独设置边框的样式column-rule-color单独设置边框的颜色列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。如果把页面缩放到只能显示一列是，它自动消失。

6、column-span

解释：设置跨列大标题。

属性值说明none默认值，表示不跨列。all表示跨列

示例代码地址