column-count - CSS（层叠样式表） 编辑

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 type	an 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!

• Desktop
• Mobile

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/