CSS3 创建多列
column-count
属性指定了需要分割的列数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
CSS3 多列中列与列间的间隙
column-gap
属性指定了列与列间的间隙。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
CSS3 列边框
column-rule-style
属性指定了列与列间的边框样式:
column-rule-width
属性指定了两列的边框厚度:
column-rule-color
属性指定了两列的边框颜色:
column-rule
属性是 column-rule-* 所有属性的简写。(可以直接用这个,看例子)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
指定元素跨越多少列
column-span:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
指定列的宽度
column-width
属性指定了列的宽度。
(不用分多少列,这个自动根据宽度分列)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
CSS3 多列属性
下表列出了所有 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 的简写 |