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