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：自动计算列数和宽度。

示例

-- -------------------- ---- -------
-- ------- --
--------- -
  -------- --
-

-- -------- ----- --
--------------- -
  -------- ---- ------
-

-- --------- --
-------------- -
  -------- -----
-
展开代码

注意事项

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