一、CSS3 column多栏布局
私有前缀：
-webkit-、-moz-
常用的属性:
-
column-width：每栏的高度 -
column-count：最理想的分栏个数 -
column-gap：栏目之间的水平间隔 -
column-rule：分割线，实际上是一个缩写，还有column-rule-width,column-rule-style,column-rule-color，就跟border是一个套路。 -
column-fill：效果不明。
其中还有一个缩写属性，名字为columns，其实是column-width和column-count的缩写。
columns: 120px; /* column-width: 120px; column-count: auto */
columns: auto 120px; /* column-width: 120px; column-count: auto */
columns: 2; /* column-width: auto; column-count: 2 */
columns: 2 auto; /* column-width: auto; column-count: 2 */
columns: auto; /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */
二、CSS3 column有趣的空间使用特性及水平滑动浏览效果实现
1. margin也在空间计算之列
<div class="box col-4">
<p>我是一个兵...</p>
</div>
<p>标签默认有上下1em的margin间距，所以会导致第四栏有可能为空白，原因是被<p>标签的margin-bottom给占据了。
2. column布局高度也是重要限制
上面几个column-count示意都是定了个宽度600px，高度是默认的auto，因此，分栏的表现都很乖巧，反正高度是无限的，无论你设置多少栏，我都可以通过调整高度来实现。
但是，如果我们高度也设定了固定的值，例如高度60px，则此时很多有意思的事情就会发生了。
如果说仅仅只是指定了column-count，至少在容器元素的可视尺寸范围内，还是设定的分栏数目，例如column-count: 3，虽然视觉上远不止3栏，但是容器可视尺寸范围就是3栏。
3. column-width会让column-count打酱油
.col-4 {
width: 600px;
column-count: 4;
column-width: 200px;
}
显然这里有矛盾之处，每栏宽度200px，总共要4栏，就算不考虑每栏之间的间隙，也至少需要800px的宽度，但是，我们容器设定的宽度只有600px，怎么办呢？
那即是column-count忽略无效打酱油，不要觉得不合理，也不要抱不平说为什么牺牲的是column-count，而不是其他属性？那是因为column-count天生注定就是要牺牲的命，因为其语义解释就是“最理想的分栏数目”，所谓最理想，就是你该牺牲的时候就要牺牲。
实际上这里最终的每栏每列宽度表现并不是200px，如果我没算错的话，在没有样式重置的情况下，应该是292px。
4. 高宽同时限制可以实现完美分页
.example {
height: 120px;
width: 100px;
column-width: 100px;
}
如果我们把100px*120px的这个名为.example的小容器看成是一页内容的话，则此时，我们容器中的所有内容，就被完美的分成了一页一页水平呈现的内容。
此时，如果我们给父元素有个如下的overflow限制：
.father {
width: 100px;
overflow: hidden;
}
此时就形成了一个永远只会显示一页宽度的视窗，然后下面的事情就简单了，我们通过JS一些一些touch相关的事件，控制我们的.example元素translateX位移，就可以实现一开始展示的水平滑屏浏览小说内容的效果了。
PS:如何判断已经滑动到底部，很简单啊，设置overflow:hidden容器的scrollWidth值就是子元素的宽度。
