Multiple columns

在线示例

Column layout methods

由于很长的文字会造成阅读上的困难，所以需要限制文本的宽度，所以有了多列布局。

由两种方式来设置多列，定义列数让浏览器来决定列宽 或是 定义列宽让浏览器来决定列数。

column-count

此属性用来定义列数，浏览器会按此数值来平分可用空间。

E { column-count: columns; }

column-width

此属性用来定义列宽，严格来说是定义列的最小宽度，如果容器有多余的宽度，会平分到每一列上。
length 可以是固定的长度值(px em)，也可以是百分比。

E { column-width: length; }

<div class="container">
    <span>The algorithm that creates the columns is actually quite intelligent and
        resizes the columns automatically so they better fit the parent. It uses the
        150px as a minimumvalue, making each column wider until the total width
        matches that of its parent—in this case, each column is resized to 168.5px
    </span>
</div>

.container{
    border: 1px solid;
    width: 710px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;;
    column-width: 150px;
}

Varying distribution of content across columns

column-fill属性来设置列高度被如何填充。其属性值可以是balance, auto。
如果值是balance，浏览器根据 column-width或 column-count来自动设置列高度；
如果值是auto，此时需要设置容器的 height 值来配合使用，列高度会是 height 的值，当内容不够长时，会出现空白列。

E { column-fill: keyword; }

此属性目前只有Firefox和IE10+支持，虽然Chrome和Safari不支持此属性，但是:
当不设置容器的 height 值时，默认表现如column-fill: balance；当设置了容器的 height 值时，表现如column-fill: auto；

.container {
    -moz-column-fill: auto;
    -moz-column-width: 150px;
    border: 1px solid;
    height: 200px;
    width: 710px;
}

Firefox下的效果

Combining column-count and column-width

columns 属性，同时使用column-count 和 column-width 属性。

E { columns: column-count column-width; }

其处理逻辑：优先使用column-count来平分容器的宽度，如果平分后列的宽度小于column-width，则按按照column-width来分配列。也就是column-width 定义的是列的最小宽度。

Column gap and rules

column-gap 属性可以设置列间隔的距离。

E { column-gap: length; }

column-rule，可以在列之间画一条线，类似 border 的属性值。
他其实是 column-rule-width，column-rule-style，column-rule-color三个属性的缩写。

E {
    column-rule-width: length;
    column-rule-style: border-style;
    column-rule-color: color;
    column-rule: length border-style color;
}

.container{
    border: 1px solid;
    width: 710px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;;
    column-width: 150px;
    -webkit-column-gap: 50px;
    -webkit-column-rule: 1px solid red;
}

Elements spanning multiple columns

column-span 属性，可以让元素横跨列，其值可以是all, none。

E { column-span: value; }

.container{
    border: 1px solid;
    width: 710px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;;
    column-width: 150px;
    -webkit-column-gap: 50px;
    -webkit-column-rule: 1px solid red;
}
.span{
    -webkit-column-span: all;
}

<div class="container">
    <span>The algorithm that creates the columns is actually quite intelligent and
        resizes the columns automatically so they better fit the parent. It uses the
        150px as a minimumvalue, making each column wider until the total width
        matches that of its parent—in this case, each column is resized to 168.5px!!!
    </span>
    <div class="span">Again</div> <!-- 注意这里必需是块元素，不然看不到横跨的效果 -->
    <span>The algorithm that creates the columns is actually quite intelligent and
        resizes the columns automatically so they better fit the parent. It uses the
        150px as a minimumvalue, making each column wider until the total width
        matches that of its parent—in this case, each column is resized to 168.5px!!!
    </span>
</div>

下面是 column-span 设置前后的区别。

此文是对《The Book of CSS3 2nd edition》第7章的翻译和归纳，方便以后查阅。
感谢其作者Peter Gasston !

文本的多列显示