CSS3之多列（column）属性详解

六月初六月初 HTML 0000-00-00 00:00:00

浏览器支持：

属性 浏览器支持
column-count IE10+ 火狐（-moz-） 谷歌（-webkit-） Safari（-webkit-） Opera
column-gap IE10+ 火狐（-moz-） 谷歌（-webkit-） Safari（-webkit-） Opera
column-rule IE10+ 火狐（-moz-） 谷歌（-webkit-） Safari（-webkit-） Opera

column-count属性：

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


-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
Column-gap属性：


释义：指定的列之间的差距。（W3C建议1EM值） 


-moz-column-gap:1em; /* Firefox */
-webkit-column-gap:1em; /* Safari and Chrome */
column-gap:1em;
Column-rule属性：


释义：规定列之间的宽度、样式和颜色。 


-moz-column-rule:4px solid #ff0000; /* Firefox */
-webkit-column-rule:4px solid #ff0000; /* Safari and Chrome */
column-rule:4px solid #ff0000;


该部分代码会在列之间生成一个宽为4像素的红色实线。

columns 属性：

释义：指定列的宽度和数量 

columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
该部分代码会生成三列宽为100像素的实例。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！