CSS3多列Multi-column布局
| Properties 属性 | CSS Version 版本 | Inherit From Parent 继承性 | Description 简介 |
|---|---|---|---|
| columns | 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：定义比默认厚度粗的边框。
设置或检索对象的列与列之间的边框样式。
column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
- 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;
}
