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
column-count
属性指定了需要分割的列数。
语法:column-count: number|auto;
值 | 说明 |
---|---|
number | 列的最佳数目将其中的元素的内容无法流出 |
auto | 列数将取决于其他属性,例如:"column-width" |
填充列:column-fill
column-fill属性指定如何填充列。
语法:column-fill: balance|auto;
值 | 说明 |
---|---|
balance | 列长短平衡。浏览器应尽量减少改变列的长度 |
auto | 列顺序填充,他们将有不同的长度 |
多列中列与列间的间隙:column-gap
column-gap
属性指定了列与列间的间隙。
语法:column-gap: length|normal;
值 | 描述 |
---|---|
length | 一个指定的长度,将设置列之间的差距 |
normal | 指定一个列之间的普通差距。 |
列边框:column-rule-
column-rule-style
属性指定了列与列间的边框样式:
语法:column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
值 | 描述 |
---|---|
none | 定义没有规则。 |
hidden | 定义隐藏规则。 |
dotted | 定义点状规则。 |
dashed | 定义虚线规则。 |
solid | 定义实线规则。 |
double | 定义双线规则。 |
groove | 定义 3D grooved 规则。该效果取决于宽度和颜色值。 |
ridge | 定义 3D ridged 规则。该效果取决于宽度和颜色值。 |
inset | 定义 3D inset 规则。该效果取决于宽度和颜色值。 |
outset | 定义 3D outset 规则。该效果取决于宽度和颜色值。 |
column-rule-width
属性指定了两列的边框厚度
语法:column-rule-width: thin|medium|thick|length;
值 | 说明 |
---|---|
thin | 指定一个细边框的规则 |
medium | 定义一个中等边框规则 |
thick | 指定一个粗边框的规则 |
length | 指定宽度的规则 |
column-rule-color
属性指定了两列的边框颜色
语法:column-rule-color: color;
column-rule
属性是 column-rule-* 所有属性的简写。
语法:column-rule: column-rule-width column-rule-style column-rule-color;
指定元素跨越多少列:column-span
语法:column-span: 1|all;
值 | 描述 |
---|---|
1 | 元素应跨越一列 |
all | 该元素应该跨越所有列 |
指定列的宽度:column-width
column-width
属性指定了列的宽度。
语法:column-width:auto|length
值 | 描述 |
---|---|
auto | 浏览器将决定列的宽度 |
length | 指定列宽的长度 |
colums属性
Columns属性是一个速记属性设置列宽和列数。
语法:columns: column-width column-count;