column分列

美化效果的属性：

(一)column-gap主要来设置列与列之间的间距：
语法：column-gap: normal || <length>  
1）默值为1em（如果你的字号是px，其默认值为你的font-size值）。
2）length的话，使用px,em单位的任何整数值，但不能是负值。


(二)column-span 跨列设置，定义一个分列元素中的子元素能跨列多少。
语法：column-span: none | all
默认值none表示不跨越任何列。all表示元素跨越所有列，并定位在列的Ｚ轴之上。

(三)column-rule 用来定义列与列之间的边框宽度、边框样式和边框颜色。类似于常用的border属性，但是不占用任何空间位置的！
语法：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
1）column-rule-width默认值为medium，接受任意浮点数，但不接收负值。
2）column-rule-style默认值为“none”，与border-style属值相同，
包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
3) column-rule-color定义列边框颜色，其默认值为前景色color的值。
 

Html代码  

1. .columns {  
2.   padding: 5px;  
3.   border: 1px solid green;  
4.   width: 900px;  
5.   margin: 20px auto;  
6.     
7.   -webkit-column-count:3;  
8.   -moz-column-count:3;  
9.   -o-column-count:3;  
10.   -ms-column-count:3;  
11.   column-count:3;  
12.     
13.   -webkit-column-gap: 2em;  
14.   -moz-column-gap: 2em;  
15.   -o-column-gap: 2em;  
16.   -ms-column-gap: 2em;  
17.   column-gap: 2em;  
18.     
19.   -webkit-column-rule: 3px gray solid;  
20.   -moz-column-rule: 3px gray solid;  
21.   -o-column-rule: 3px gray solid;  
22.   -ms-column-rule: 3px gray solid;  
23.   column-rule: 3px gray solid;  
24. }  
25. h2{  
26.   background: green;  
27.   padding: 10px;  
28.   color: #fff;  
29. }  
30.   
31. h2,  
32. p:nth-child(2n){  
33.   -webkit-column-span:all;  
34.   -moz-column-span:all;  
35.   -o-column-span:all;  
36.   column-span:all;  
37. }  
38. <div class="columns">  
39.   <h2>我要分列显示</h2>  
40.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。</p>  
41.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。</p>  
42.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。</p>  
43.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。</p>  
44.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。</p>  
45.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。</p>  
46. </div>  

google亲测成功：

ff测试未显示。