CSS3 _ CSS 多栏布局

CSS 多栏布局

CSS Multi-column Layout 多栏布局

CSS多栏布局（Multi-column Layout）可以方便快捷地实现文本分栏布局。

九阴真经（总纲）

天之道，损有余而补不足，是故虚胜实，不足胜有余。其意博，其理奥，其趣深，天地之象分，阴阳之候列，变化之由表，死生之兆彰，不谋而遗迹自同，勿约而幽明斯契，稽其言有微，验之事不忒，诚可谓至道之宗，奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于治训，未尝有行不由送，出不由产者亦。然刻意研精，探微索隐，或识契真要，则目牛无全，故动则有成，犹鬼神幽赞，而命世奇杰，时时间出焉。五藏六府之精气，皆上注于目而为之精。精之案为眼，骨之精为瞳子，筋之精为黑眼，血之精力络，其案气之精为白眼，肌肉之精为约束，裹撷筋骨血气之精而与脉并为系，上属于脑，后出于项中。故邪中于项，因逢其身之虚，其人深，则随眼系以入于脑，入手腼则脑转，脑转则引目系急，目系急则目眩以转矣。邪其精，其精所中不相比亦则精散，精散则视岐，视岐见两物。阴极在六，何以言九。太极生两仪，天地初刨判。六阴已极，逢七归元太素，太素西方金德，阴之清纯，寒之渊源。

浏览器兼容性

下表是每种浏览器支持多栏布局的最低版本，其中-ms-、-webkit-、-moz-、-o-这些前缀，指每种浏览器支持该类属性的最低版本浏览器中，需要加上这些前缀，比如在2.0版本的Firefox浏览器中如果要想用column-rule属性，则需要写成-moz-column-rule属性；剩下的以此类推。

属性
column-count	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.0 -o-
column-gap	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.0 -o-
column-rule	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.0 -o-
column-rule-color	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.0 -o-
column-rule-style	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.0 -o-
column-rule-width	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.0 -o-
column-span	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.0 -o-
column-width	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.0 -o-

CSS 多栏布局相关属性

多栏布局相关CSS属性如下所示：

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS 创建多栏

使用column-count属性可以设置元素的分栏数目。如下列所示，分栏3列：

div {
    column-count: 3;
}

运行一下

CSS 设置栏距

通过CSS中的column-gap可以设置多栏之间的空白距离。如下所示，栏距被定义为28px宽度：

div {
    column-gap: 28px;
}

运行一下

CSS 分栏线

使用column-rule属性可以定义分栏布局元素的分栏线样式、粗细、颜色，有点类似border属性的味道。column-rule属性通吃了column-rule-style、column-rule-width、column-rule-color这三种属性。

案例1：使用column-rule-style、column-rule-width、column-rule-color三种属性

div {
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: #46acb6; /* 一种蓝色 */
}

运行一下

案例2：只使用column-rule属性（等价于案例1，但更推荐使用这种方式）

div {
    column-rule: 1px solid #46acb6;
}

运行一下

定义是否跨列

有时在多列布局中的某个元素需要跨列，这时就可以使用column-span属性，把该属性设置成all即可跨列显示，具体如下例所示。

另外注意一下，不包括属性继承那些，column-span属性就只有2个具体取值，“1”和“all”：

1 - 代表不跨列（默认）
all - 跨全列

示例：

h3 {
    column-span: all;
}

运行一下

分栏宽度

通过CSS中的column-width属性可以设置分栏的宽度。但是该属性的取值只能是100px的整数倍。（跟font-weight属性有点像呵~）

div {
    column-width: 200px;
}

运行一下

CSS 多栏布局

推广