We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

 

column-count CSS属性,描述元素的列数。

column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;

语法

初始值auto
适用元素Block containers except table wrapper boxes
是否是继承属性
适用媒体visual
计算值as specified
Animation typean integer
正规顺序per grammar

取值

auto
用来表示列的数量由其他CSS属性指定, 例如 column-width.
<number>
是个严格的正数 <integer> ,用来描述元素内容被划分的理想列数. 假如 column-width也被设置为非零值, 此参数仅表示所允许的最大列数. 

例子

.content-box {
  border: 10px solid #000000;
  column-count:3;
}

规范

Specification Status Comment
CSS Multi-column Layout Module
column-count
Working Draft  

 

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 1.5 (1.8)-moz 10 11.1 3.0 (522)-webkit
on display: table-caption (Yes) 37 (37) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.8)-moz (Yes) (Yes) (Yes)
on display: table-caption (Yes) 37.0 (37) (Yes) (Yes) (Yes)

 

了解更多

https://www.w3.org/TR/css3-multicol/

https://caniuse.com/#search=column

 

文档标签和贡献者

最后编辑者: xgqfrms-GitHub,