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
其它属性浏览器暂时支持不是很好,先不研究,呵呵。