认识CSS3的column属性

腾讯ISD的CSS3中文手册有一个很实用的属性：column。

我们先来看一下效果：

4列的布局

 
对于这两个例子，如果按照CSS2的思路来看，我们肯定是第一时间想到使用2-4个DIV标签，float左右布局来实现，但是在CSS3里，你只需要这样：

 p {margin:0; padding:0 0 8px 0; line-height:22px; font-size:12px; text-indent:2em;}
div {-webkit-columns:300px 2; -webkit-column-rule:5px dashed #CCC; -webkit-column-gap:50px;}
HTML代码：

1
 <div>
<p>昨天加班回家看见路上有一只幼猫横死街头，心理颇为难过，这可怜的小生命就这样悄然陨落了，肥头肥脑的，若是活着应该是一只很招人喜爱的虎斑小猫。然而没想到仅仅是打个车回家的距离，那只常常在宿舍电梯口垃圾箱找吃的的白色流浪猫也横死在宿舍大楼的正门，这只白猫比我先住进这个小区，我和它做了五个月的邻居，我曾经挠过它，给它喂过吃的。</p>
<p>我们小区有不少流浪猫，大都很怕人，不会与我亲近，唯独这只例外，对人没有畏惧，还会主动亲近人，也只有这只猫常年守在我们这栋楼的大门口，安安静静，就像在等待什么，就连去年上海的大雪它也卷缩成一团守在门口，当时我看它实在可怜，就把铁门打开哄它近楼里避避风，本想让它跟近屋子，给它点吃的，但是它始终仅仅只是在楼道里徘徊，不肯进电梯，无奈我只能回家给他取了点吃的送到楼下，当时生怕它撑不过去年的寒冬，可是我有怎么能想到它渡过了冬天，却在刚刚迎来春天的时候死了，死得这样的无助，死在了它一直守着的大楼的门口。</p>
<p>我甚至都记不起来曾经有没有看过死掉的猫，我想应该是见过的，但怎么也想不起来了，估计见过也是很多很多年前了，如今却在几分钟内在不同的地点见到了两只死掉的猫，心理有种说不出的感受，不仅是为他们悲伤，还有感叹命运，甚至觉得这个世界或许也存在不了多久了吧&hellip;…</p>
<p>最后愿这两只小猫安息:)</p>
</div>
怎么样？是不是很简单？不用写很多个DIV，也不用考虑浮动带来的各种bug。

但是，比较遗憾的是，现在支持column属性的浏览器只有Chrome和Safari以及Firefox（使用-moz-column-count和-moz-column-width实现），感兴趣的同学可以把这两段代码拷贝了测试测试。