CSS多列

通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!
多列属性:
column-count
column-gap
column-rule

设置多列只需要将实际需要分列的文本放在div中就可以自动多列布局。

CSS3 创建多列

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

CSS3 规定列之间的间隔

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

CSS3 列规则

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

div {
            -moz-column-rule:3px outset #ff0000;    
            -webkit-column-rule:3px outset #ff0000; 
            column-rule:3px outset #ff0000;
        }

新的多列属性

column-span 属性

column-span:1|all
1:元素应横跨一列
all:元素应横跨所有列

column-fill 属性

auto:列高度自适应内容
balance:所有列的高度以其中最高的一列统一

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章