CSS3 多列布局属性

1.column-count

    column-count属性规定元素应该被划分的列数。

2.column-gap

    column-gap属性规定列之间的间隔。

    为之前的实例添加此属性，代码如下:

    column-gap: 40px;

3.column-rule-style

    column-ru!e-style属性规定列之间的样式规则，它类似于border-style属性，其属性的值可以是以下几种：

    •none：定义没有规则。

    •hidden：定义隐藏规则。

    •dotted: 定义点状规则。

    •dashed：定义虚线规则。

    •solid：定义实线规则。

    •double：定义双线规则。

    •groove：定义3D graoved规则，该效果取决于宽度和颜色值。

    •ridge：定义3D ridged规则，该效果取决于宽度和颜色值。

    •inset：定义3D inset规则，该效果取决于宽度和颜色值。

    •outset：定义3D outset规则，该效果取决于宽度和颜色值。

4.column-rule-width

    column-rule-width属性规定列之间的宽度规则，它类似于border-width属性，其属性的值可以使以下几种：

    •thin：定义纤细规则。

    •medium：定义中等规则。

    •thick：定义宽厚规则。

    •length：规定规则的宽度。

5.column一rulo-color

    column-rule-color属性规定列之间的颜色规则，它类似于border-color属性。 

    下面利用上述三个属性添加列与列的分割线，代码如下：

    column-rule-color: red;

    column-rule-width: 5 px;

    column-rule-style: dotted;

6.column-rule

    column-ruie是一个简写属性，用于设置所有column-rule-*属性。column-rule属性设置列之间宽度、样式和颜色规则，类似于border属性。

7.column-span

    column-span属性规定元素应横跨多少列，其值可以是以下两种：

    •1：元素应横跨一列。

    •all：元素应横跨所有列。

8.column-width

    column-width属性规定列的宽度，其属性的值可以是以下两种：

    •auto：由浏览器决定列宽。

    •length：规定列的宽度。

9.columns

    columns属性是一个简写属性，用于设置列宽和列数，语法如下：

    columns: column-width column-count: