多列布局: CSS3中的columns属性详解及应用示例

CSS3的columns属性可以用来创建多列布局。该属性允许你指定列宽和列数，还可以设置列间距。

columns属性的基本语法如下：

columns: <column-width> || <column-count>;

其中，<column-width>可以是具体的宽度值，也可以是百分比，用来指定列宽；<column-count>是一个整数，用来指定列数。

下面是一个简单的多列布局示例：

div.multi-column {
  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3;    /* Firefox */
  columns: 100px 3;         /* 标准语法 */
}

这段代码会将div元素内的内容分成3列，每列宽度为100px。

如果你想要设置列间距，可以使用column-gap属性：

div.multi-column {
  -webkit-columns: 100px 3;
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3;
  -moz-column-gap: 20px;    /* Firefox */
  columns: 100px 3;
  column-gap: 20px;         /* 标准语法 */
}

这样就会在列之间添加20px的间隔。