CSS3 多列布局 columns

a.column-width 每列的宽度

CSS3 (columns)_CSS3 columns

实例代码:

CSS3 (columns)_CSS3 columns_02

说明:

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

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

b.column-count 列数

CSS3 (columns)_CSS3 columns_03

实例代码:

CSS3 (columns)_CSS3 columns_04

说明:

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

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

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

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

c.column-gap 列之间的间隔

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

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

CSS3 (columns)_CSS3 columns_05

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

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

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

e.column-span: 横跨通栏

CSS3 (columns)_CSS3 columns_06

说明:

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

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

3.值为 all || none

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