column-count

概述

colunm-count这个CSS属性，用来描述该元素应该被划分的列数.

初始值	auto
适用元素	non-replaced block elements (except table elements), table-cell or inline-block elements
是否是继承属性	否
适用媒体	visual
计算值	as specified
是否适用于 CSS 动画	yes, as an integer
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax: <number> | auto

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

取值

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	Candidate Recommendation

浏览器兼容性

• 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)