CSS3 多列

CSS3多列

通过CSS3，能够创建多个列来对文本进行布局-就像报纸那样。

多列属性：

• column-count
• column-gap
• column-rule

浏览器支持

属性	浏览器支持
column-count
column-gap
column-rule

IE10和Opera支持多列属性。

Firefox需要前缀-moz-. Chrome和Safari需要前缀-webkit-.

注释：IE9以及更早的版本不支持多列属性。

 

CSS3 创建多列

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

        div.columnOne {
            width:210px;
            height:100px;
            margin:20px;
            border:2px double black;
            column-count:3;
        }

CSS3 规定列之间的间隔

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

        div.columnOne {
            width:210px;
            height:100px;
            margin:20px;
            border:2px double black;
            column-count:3;
            column-gap:3px;
        }

CSS3 列规则

column-rule属性设置列之间的宽度、样式和颜色规则。

        div.columnOne {
            width: 210px;
            height: 100px;
            margin: 20px;
            border: 2px double black;
            column-count: 3;
            column-gap: 6px;
            column-rule: 2px outset #ff0000;
        }

新的多列属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
column-count	规定元素应该被分隔的列数。	3
column-fill	规定如何填充列。	3
column-gap	规定列之间的间隔。	3
column-rule	设置所有 column-rule-* 属性的简写属性。	3
column-rule-color	规定列之间规则的颜色。	3
column-rule-style	规定列之间规则的样式。	3
column-rule-width	规定列之间规则的宽度。	3
column-span	规定元素应该横跨的列数。	3
column-width	规定列的宽度。	3
columns	规定设置 column-width 和 column-count 的简写属性。	3