CSS3多列column布局 | 易学教程

Properties属性	CSS Version版本	Inherit From Parent继承性	Description简介
column	css3	无	设置或检索对象的列数和每列的宽度。复合属性
column-width	css3	无	设置或检索对象每列的宽度
column-count	css3	无	设置或检索对象的列数
column-gap	css3	无	设置或检索对象的列与列之间的间隙
column-rule	css3	无	设置或检索对象的列与列之间的边框。复合属性
column-rule-width	css3	无	设置或检索对象的列与列之间的边框厚度。
column-rule-style	css3	无	设置或检索对象的列与列之间的边框样式。
column-rule-color	css3	无	设置或检索对象的列与列之间的边框颜色。
column-span	css3	无	设置或检索对象元素是否横跨所有列。

column-fill	css3	无	设置或检索对象所有列的高度是否统一。
column-break-before	css3	无	设置或检索对象之前是否断行。
column-break-after	css3	无	设置或检索对象之前是否断行。
column-break-inside	css3	无	设置或检索对象内部是否断行。

columns

设置或检索对象的列数和每列的宽度。复合属性

columns：[ column-width ] || [ column-count ]

.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}

.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}

column-width

设置或检索对象每列的宽度

.test{
width:628px;
border:10px solid #000;
-moz-column-width:200px;
-moz-column-count:3;
-webkit-column-width:200px;
-webkit-column-count:3;
column-width:200px;
column-count:3;
}

.test2{
border:10px solid #000;
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;
}

.test3{
border:10px solid #000;
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;
}

column-count

设置或检索对象的列数

column-count：<integer> | auto

<integer>：用整数值来定义列数。不允许负值

auto：根据column-width自定分配宽度

column-gap

设置或检索对象的列与列之间的间隙

column-gap：<length> | normal

<length>：用长度值来定义列与列之间的间隙。不允许负值

normal：与font-size大小相同。假设该对象的font-size为16px，则normal值为16px，类推。

column-rule

设置或检索对象的列与列之间的边框。复合属性。

column-rule：[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]

[ column-rule-width ]：设置或检索对象的列与列之间的边框厚度。

[ column-rule-style ]：设置或检索对象的列与列之间的边框样式。

[ column-rule-color ]：设置或检索对象的列与列之间的边框颜色。

.test{
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:10px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:10px solid #090;
column-count:3;
column-gap:20px;
column-rule:10px solid #090;
}

设置或检索对象的列与列之间的边框厚度。

column-rule-width：<length> | thin | medium | thick

<length>：用长度值来定义边框的厚度。不允许负值

medium：定义默认厚度的边框。

thin：定义比默认厚度细的边框。

thick：定义比默认厚度粗的边框。

设置或检索对象的列与列之间的边框样式。

none：无轮廓。column-rule-color与column-rule-width将被忽略

hidden：隐藏边框。

dotted：点状轮廓。

dashed：虚线轮廓。

solid：实线轮廓

double：双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值

groove：3D凹槽轮廓。

ridge：3D凸槽轮廓。

inset：3D凹边轮廓。

outset：3D凸边轮廓。

column-rule-color：<color>

设置或检索对象元素是否横跨所有列。

column-span：none | all

none：不跨列

all：横跨所有列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:3;
column-gap:20px;
column-rule:3px solid #090;
}

.test p{
-moz-column-span:all;
-webkit-column-span:all;
column-span:all;
}

效果：

CSS3多列Multi-column布局

设置或检索对象所有列的高度是否统一。

column-fill：auto | balance

auto：列高度自适应内容

balance：所有列的高度以其中最高的一列统一

.test{
width:600px;
border:10px solid #000;
-moz-column-count:2;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-moz-column-fill:balance;
-webkit-column-count:2;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
-webkit-column-fill:balance;
column-count:2;
column-gap:20px;
column-rule:3px solid #090;
column-fill:balance;
}

效果图：

CSS3多列Multi-column布局

设置或检索对象之前是否断行。

auto：既不强迫也不禁止在元素之前断行并产生新列

always：总是在元素之前断行并产生新列

avoid：避免在元素之前断行并产生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}

.test div{
-moz-column-break-before:always;
-webkit-column-break-before:always;
column-break-before:always;
}

效果图：

CSS3多列Multi-column布局

设置或检索对象之后是否断行。

auto：既不强迫也不禁止在元素之后断行并产生新列

always：总是在元素之后断行并产生新列

avoid：避免在元素之后断行并产生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}
.test div{
-moz-column-break-after:always;
-webkit-column-break-after:always;
column-break-after:always;
}

效果图：

CSS3多列Multi-column布局