columns
column-width:[<length>|auto] 定义每栏的宽度
column-span:1|all 1:只在本栏中显示；all:横跨所有栏目并定位在栏目的Z轴之上。
column-rule
column-rule-color:<color> 定义每栏之间边框的颜色
column-rule-width:<length> 定义每栏之间边框的宽度
column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
（无边框(默认)|隐藏边框|点线|虚线|实线边框|双线边框|3D凹槽|3D凸槽|3D凹边|3D凸边）
column-gap:normal|<length> 定义两栏之间的间距距离
column-fill:auto|balanc 定义栏目的高度是否统一
（auto:各栏目的高度随其内容的多少而自动变化；
balance:各栏目的高度将会根据内容最多的那一栏的高度进行统一）
column-count:auto|整数 可以定义栏目的数目
column-break-before:auto|always|avoid 定义元素之前是否断行
column-break-after:auto|always|avoid 定义元素之后是否断行
对于引擎为webkit的浏览器，写法为-webkit-column
对于引擎为moz的浏览器，写法为-moz-column
举例如下：
- <!DOCTYPE html>
- <head>
- <meta charset=utf-8/>
- <style type="text/css" media="screen">
- <!--
- .wrapper {
- width:703px;
- padding:10px;
- margin:40px auto 0;
- border:1px solid #333333;
- }
- .wrapper .inner {
- padding:5px 10px;
- }
- .wrapper .inner h2 {
- color:#333333;
- background:#DCDCDC;
- padding:5px 8px;
- }
- .wrapper .inner .cont {
- color:#333333;
- font-size:14px;
- line-height:180%;
- text-indent:2em;
- }
- .wrapper .inner .cont p {
- margin-bottom:15px;
- line-height:180%;
- }
- .wrapper .inner .cont .column-width {
- -webkit-column-width:300px;
- -webkit-column-count:2;
- -webkit-column-gap:50px;
- -moz-column-width:300px;
- -moz-column-count:2;
- -moz-column-gap:50px;
- }
- -->
- </style>
- <title>column-width</title>
- </head>
- <body>
- <div class="wrapper">
- <div class="inner">
- <h2>春-朱自清（节选）</h2>
- <div class="cont">
- <div class="column-width">
- <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
- <p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的小脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。
- 桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。</p>
- <p>“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。 </p>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
