css3多列布局

CSS3的多列布局可以使用column-*属性来实现，这些属性包括column-count、column-gap、column-rule等。

以下是一个简单的例子，展示如何使用CSS3的多列布局：

HTML:

<div class="multi-column">
  <p>这里是一些文本，将会被分布到多列中。</p>
  <!-- 更多内容 -->
</div>

CSS:

.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;
}

在这个例子中，.multi-column 类定义了一个包含3列的多列布局，列间隔为20px，列之间有一条颜色为灰色(#ccc)的1px宽的规则。这段代码将确保文本在不超过容器宽度的前提下，最优雅地分布在三列中。