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

CSS3 多列,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。