CSS3之column

時間 2020-05-20

標籤 css3 css column 欄目 CSS 简体版

原文原文鏈接

columnscss

column-width:[<length>|auto] 定義每欄的寬度 html

column-span:1|all 1:只在本欄中顯示；all:橫跨全部欄目並定位在欄目的Z軸之上。web

column-rule 瀏覽器

column-rule-color:<color> 定義每欄之間邊框的顏色 app

column-rule-width:<length> 定義每欄之間邊框的寬度 ide

（無邊框(默認)|隱藏邊框|點線|虛線|實線邊框|雙線邊框|3D凹槽|3D凸槽|3D凹邊|3D凸邊）orm

column-gap:normal|<length> 定義兩欄之間的間距距離 xml

column-fill:auto|balanc 定義欄目的高度是否統一 htm

（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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。