天行健, 君子以自强不息
Sunny's Blog
Title

css3: 多列column学习

CSS3多列,让你可以像报纸那样布局,其中主要有3个属性,column-count、column-gap、column-rule

浏览器支持情况

Internet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。注释:Internet Explorer 9 以及更早的版本不支持多列属性。

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

                    把 div 元素中的文本分隔为三列:
                    div
                    {
                    -moz-column-count:3;    /* Firefox */
                    -webkit-column-count:3; /* Safari 和 Chrome */
                    column-count:3;
                    }
                

2.column-gap 属性规定列之间的间隔:

                    规定列之间 40 像素的间隔:
                    div
                    {
                    -moz-column-gap:40px;       /* Firefox */
                    -webkit-column-gap:40px;    /* Safari 和 Chrome */
                    column-gap:40px;
                    }
                

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

                    规定列之间的宽度、样式和颜色规则:
                    div
                    {
                    -moz-column-rule:3px outset #ff0000;    /* Firefox */
                    -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
                    column-rule:3px outset #ff0000;
                    }
                

column-rule-style的一些样式选择 W3School CSS3 多列

地势坤,君子以厚德载物