column-count

 

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
是否是继承属性
计算值as specified
Animation typean integer

取值

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

例子

.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! (en-US)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit (en-US) 1.5 (1.8)-moz (en-US) 10 11.1 3.0 (522)-webkit (en-US)
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 (en-US) (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