column-count

**column-count** CSS 属性将元素的内容分成指定数量的列。

试试看

语法

css
/* Keyword value */
column-count: auto;

/* <integer> value */
column-count: 3;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;

Values

auto

列数由其他 CSS 属性决定，例如 column-width。

<integer>

是一个严格的正 <integer>，表示元素内容将流入的理想列数。如果 column-width 也设置为非 auto 值，则它仅表示允许的最大列数。

正式定义

初始值auto
适用于除了表格包装框以外的块级容器
继承no
计算值如指定
动画类型一个 整数

正式语法

column-count = 
  auto             |
  <integer [1,∞]>

示例

将段落分成三列

HTML

html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS
  <code>column-count</code>
  property. The text is equally distributed over the columns.
</p>

CSS

css
.content-box {
  column-count: 3;
}

Result

规范

Specification
CSS 多列布局模块级别 1
# cc

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见