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 !