CSS参考手册
多列布局 | Multi-column Layout
列数 | column-count
该column-count
CSS属性描述元素的列数。
/* <integer> value */
column-count: 3;
/* Keyword value */
column-count: auto;
/* Global values */
column-count: inherit;
column-count: initial;
column-count: unset;
Initial value |
auto |
---|---|
应用对象 |
Block containers except table wrapper boxes |
是否可继承 |
no |
媒体 |
visual |
计算值 |
as specified |
动画类型 |
an integer |
规范顺序 |
per grammar |
语法
值
auto
是一个关键字,用来表示由其他CSS属性指定
的列数量, 例如 column-width
.
<integer>
是个严格的正数 <integer>
,用来描述元素内容被划分的理想列数. 假如 column-width
也被设置为非auto值, 此参数仅表示所允许的最大列数.
形式语法
<integer> | auto
实例
.content-box {
border: 10px solid #000000;
column-count: 3;
}
规范
Specification |
Status |
Comment |
---|---|---|
CSS Multi-column Layout ModuleThe definition of 'column-count' in that specification. |
Candidate Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
(Yes)-webkit 50.01 |
(Yes)-webkit (Yes) |
1.5 (1.8)-moz 52 (52)2 |
10 |
11.10 |
3.0 (522)-webkit |
on display: table-caption |
(Yes) |
(Yes) |
37 (37) |
(Yes) |
(Yes) |
(Yes) |
Feature |
Android |
Android Webview |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support |
(Yes) |
(Yes) 50.01 |
(Yes)-webkit (Yes) |
1.0 (1.8)-moz 52.0 (52)2 |
(Yes) |
(Yes) |
(Yes) |
? 50.01 |
on display: table-caption |
(Yes) |
? |
(Yes) |
37.0 (37) |
(Yes) |
(Yes) |
(Yes) |
? |
多列布局 | Multi-column Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。