CSS3-多列（column-count等）

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;

转载于:https://www.cnblogs.com/lmjZone/p/8567573.html