http://chenjing1122.blog.51cto.com/2882495/523893
指定列宽度和数量
columns 列宽 列数
column-width:[<length>|auto] 定义每栏的宽度
column-count:auto|整数 可以定义栏目的数目
指定列跨越
column-span:1|all 1:只在本栏中显示;all:横跨所有栏目并定位在栏目的Z轴之上。
指定列间距和列隔线
column-gap:normal|<length> 定义两栏之间的间距距离
column-rule
column-rule:1px solid #f00 同border但是不占盒子宽度,但列线width大于gap宽度的时候讲不显示列线
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-fill:auto|balanc 定义栏目的高度是否统一
(auto:各栏目的高度随其内容的多少而自动变化;
balance:各栏目的高度将会根据内容最多的那一栏的高度进行统一)
指定分列
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>