通过 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:所有列的高度以其中最高的一列统一