CSS3多列样式column布局内容被截断

今天做了一个瀑布流的效果，发现使用css3的列布局处理这个问题简直是完美啊！

但是在做的过程中还是出现了一个问题，就是在底部出现内容被截断，然后剩余的部分出现在下一列的头部的位置，就像这种

去百度了一下，发现，原来在CSS3规范里，各列的高度是均衡的。浏览器会自动调整每列会填充多少文本，然后让整个布局的高度保持均衡一致。而我们在做这种瀑布流的类似布局的时候，往往只需要设置每个容器的宽度，然后高度通过内容填充来自适应。所以，浏览器在处理的时候，为了保持高度的均衡分配，会将我们的布局截断，然后造成布局错乱。

解决方式：

只需要给分列的容器加上height:100%;overflow: auto;

看！上述的问题就可以完美解决了，是不是很简单啊~~