CSS3 columns 属性

columns 属性用于指定元素的多列布局。通过设置 columns 属性，可以将内容分为多列显示，使页面更加美观和易读。

语法

selector {
  columns: <column-count> || <column-width> || auto;
}

• column-count：column-width 指定列的数量。
• column-width：column-count 指定每列的宽度。
• auto：自动计算列数和宽度。

值

• <column-count>：整数值，表示列的数量。
• <column-width>：长度值，表示每列的宽度。
• auto：自动计算列数和宽度。

示例

// www.javascriptcn.com code example
/* 将内容分为两列 */
.columned {
  columns: 2;
}

/* 指定每列的宽度为 200px */
.columned-width {
  columns: auto 200px;
}

/* 自动计算列数和宽度 */
.columned-auto {
  columns: auto;
}

注意事项

• columns 属性需要浏览器的支持，不是所有浏览器都支持该属性。
• 在使用 columns 属性时，要注意元素的内容是否适合分成多列显示，避免出现内容重叠或排版混乱的情况。