CSS3之column

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

 

举例如下:

 

  
  
  
  
  1.  <!DOCTYPE html> 
  2. <head> 
  3. <meta charset=utf-8/> 
  4. <style type="text/css" media="screen"> 
  5. <!-- 
  6. .wrapper { 
  7. width:703px;  
  8. padding:10px;  
  9. margin:40px auto 0;  
  10. border:1px solid #333333; 
  11. .wrapper .inner {  
  12. padding:5px 10px; 
  13. .wrapper .inner h2 { 
  14. color:#333333;  
  15. background:#DCDCDC;  
  16. padding:5px 8px; 
  17. .wrapper .inner .cont { 
  18. color:#333333;  
  19. font-size:14px;  
  20. line-height:180%;  
  21. text-indent:2em; 
  22. .wrapper .inner .cont p { 
  23. margin-bottom:15px;  
  24. line-height:180%; 
  25. .wrapper .inner .cont .column-width { 
  26. -webkit-column-width:300px; 
  27. -webkit-column-count:2; 
  28. -webkit-column-gap:50px; 
  29.  
  30. -moz-column-width:300px; 
  31. -moz-column-count:2; 
  32. -moz-column-gap:50px; 
  33. --> 
  34. </style> 
  35. <title>column-width</title> 
  36. </head> 
  37. <body> 
  38. <div class="wrapper"> 
  39.     <div class="inner"> 
  40.         <h2>春-朱自清(节选)</h2> 
  41.  
  42.         <div class="cont"> 
  43.             <div class="column-width">               
  44.     <p>盼望着,盼望着,东风来了,春天的脚步近了。</p>  
  45.     <p>一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的小脸红起来了。小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草绵软软的。  
  46.     桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味,闭了眼,树上仿佛已经满是桃儿、杏儿、梨儿!花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。野花遍地是:杂样儿,有名字的,没名字的,散在草丛里,像眼睛,像星星,还眨呀眨的。</p> 
  47.     <p>“吹面不寒杨柳风”,不错的,像母亲的手抚摸着你。风里带来些新翻的泥土气息,混着青草味,还有各种花的香,都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中,高兴起来了,呼朋引伴地卖弄清脆的喉咙,唱出宛转的曲子,与轻风流水应和着。牛背上牧童的短笛,这时候也成天嘹亮地响着。  </p>              
  48.             </div> 
  49.         </div> 
  50.     </div> 
  51. </div> 
  52. </body> 
  53. </html> 

你可能感兴趣的:(css,column,职场,css3,休闲)