CSS3 多列
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!
在本章中,您将学习如下多列属性:
- column-count
- column-gap
- column-rule
浏览器支持
属性 | 浏览器支持 | ||||
---|---|---|---|---|---|
column-count | |||||
column-gap | |||||
column-rule |
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 以及更早的版本不支持多列属性。
CSS3 创建多列
column-count 属性规定元素应该被分隔的列数:
实例
把 div 元素中的文本分隔为三列:
div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3;
}