column-count

如果您在设计多列布局时需要确定的列数，请使用 column-count。

.lead {
  column-count: 3;
 }

给定列数后，浏览器将均匀地将内容分配到恰好该数量的列中。

此属性也可用于 columns 的简写形式，并可与 column-width 结合使用。当声明这两个属性时，column-count 是最大列数。

值

column-count 可以是 auto 或整数。

如果您也使用 column-width，请使用 auto。可以将其视为一种告诉浏览器让 column-width 优先的方式。

整数（也称为列数）必须大于或等于 0。

与 column-width 不同，此属性将保持列数，而不管浏览器宽度如何。这意味着，如果您在手机上打开一个 5 列布局，您将看到一个非常狭窄的 5 列布局来导航。column-count 最适合与 column-width 配合使用。

相关属性

• columns
• column-fill
• column-gap
• column-rule
• column-span
• column-width

其他资源

• MDN 文档
• CSS3 规范
• Can I Use

浏览器支持

多列布局支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	3+	1.5+	11.1+	10+	81	3.2+

如果您还没有使用可以帮助您处理前缀的工具，请不要忘记添加前缀。