CSS3 多列

 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: 

一、 多列的属性

    以下几个为CSS3 的多列属性:

· column-count

· column-gap

· column-rule-style

· column-rule-width

· column-rule-color

· column-rule

· column-span

· column-width 

二、 创建多列

column-count 属性指定了需要分割的列数。以下实例将 <div> 元素中的文本分为 3 列

代码例子：

 

运行效果：

 

三，多列属性的实现

CSS3 多列属性

下表列出了所有 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 的简写

代码实现：

 

实现效果：