CSS | 列数属性

CSS列数属性（column-count）是用来将流动的内容分为多列显示的一种方式。使用column-count，可以设置显示的列数，每一列的间距和内容的分布方式。

语法

/* 基本语法 */
element {
    column-count: <number> | auto;
}

属性值

| 值 | 描述 | | -------- | -------------------------------- | | <number> | 列数 | | auto | 浏览器将尝试根据容器宽度计算列数 |

例子

栗1：设置两列

div {
    column-count: 2;
}

栗2：设置三列且每列之间有间距

div {
    column-count: 3;
    column-gap: 30px;
}

栗3：设置自动计算列数

div {
    column-count: auto;
}

备注

• 如果设置的列数超出了容器的宽度，则会发生溢出。
• column-count不能和列宽一起使用。
• column-count属性不支持IE浏览器。

结语

CSS列数属性可以很好地分割多列内容并优雅地分布它们。如果您需要将内容分为多个列，则尝试使用此属性。