CSS3 (columns)

CSS3 多列布局 columns

a.column-width 每列的宽度

实例代码：

说明：

1.如果内容的宽度小于所设置内容的宽度，则只出现一列，并且不会影响元素本身的display属性。如果内容的宽度大于所设置的值，则会用内容的宽度除以所设置的值形成多列现象。

2.多列布局只能用于块元素上。(比如在span上这个属性将不会起作用)

b.column-count 列数

实例代码：

说明：

1.设置的值如果小于或者等于1都将显示一列就相当于没有设置。

2.如果大于1元素里面的内容会平均分成几列显示。

3.同样这个属性也只能作用在块元素上。

多列布局主要靠这两个属性进行布局。

c.column-gap 列之间的间隔

用于设置列于列之间的间隔，不能为负值。

d.column-rule: 列间隔边框的样式

-moz-column-rule-width: 10px;间隔边框的厚度

-moz-column-rule-style: solid;间隔边框类型

-moz-column-rule-color: red;间隔边框的颜色

e.column-span: 横跨通栏

说明：

1.p里面的内容将横跨这几个列，形成独立的一整行。

2.这个属性ff暂时不支持。

3.值为 all || none

其它属性浏览器暂时支持不是很好，先不研究，呵呵。