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;
}