下表列出了所有 CSS3 的多列属性:
属性 | 描述 |
---|---|
column-count | 指定元素应该被分割的列数。 |
column-fill | 指定如何填充列 |
column-gap | 指定列与列之间的间隙 |
column-rule | 所有 column-rule-* 属性的简写 |
column-rule-color | 指定两列间边框的颜色 |
column-rule-style | 指定两列间边框的样式 |
column-rule-width | 指定两列间边框的厚度 |
column-span | 指定元素要跨越多少列 |
column-width | 指定列的宽度 |
columns | 设置 column-width 和 column-count 的简写 |
column-count---创建多列
/*将文本分为三列*/
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
column-gap----列与列间的间隙
/*间隙为40px*/
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
column-rule-style---列与列之间的边框样式
/*列与列之间的边框样式为实线*/
div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
//边框厚度
column-rule-width:1px;
//边框颜色
column-rule-color:blue;
column-span---指定元素跨越多少列
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
指定列的宽度
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}