CSS3 多列布局

CSS3 的多列布局可以使用 column-* 属性来实现。以下是一些常用的属性：

• column-count: 定义列的数量。
• column-gap: 定义列与列之间的间隙。
• column-rule: 定义列之间的分隔线（类似于边框的样式）。

示例代码：

.multi-column {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3;    /* Firefox */
  column-count: 3;
  
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;    /* Firefox */
  column-gap: 20px;
  
  -webkit-column-rule: 1px solid #ccc; /* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid #ccc;    /* Firefox */
  column-rule: 1px solid #ccc;
}

HTML 使用该样式的示例：

<div class="multi-column">
  <p>这里是内容...</p>
  <!-- 更多内容 -->
</div>

这段代码会将 .multi-column 类中的内容分成3列，列与列之间的间隙为20px，并在列之间添加一条颜色为灰色（#ccc）、宽度为1px的线。