淺談CSS3多列布局

相信你們都看過報紙,報紙上的內容大多數都是分欄顯示的,以下圖所示:css


對於前端攻城獅來講,這種分列布局,在之前雖然能夠實現,但是難度倒是不小,工做量很大,必須使用JavaScript對內容分段,再配合上絕對定位或浮動等CSS樣式來實現多列布局。但如今,強大的CSS3爲咱們提供了「multi-column」,讓咱們能夠很輕鬆的實現這樣的分列布局。

先來看看與多列布局(multi-column)相關的css屬性有哪些:
列數和列寬:column-countcolumn-widthcolumns
列的間距和分列樣式:column-gapcolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-rule
跨越列:column-span
填充列:column-fill
分欄符:column-break-beforecolumn-break-aftercolumn-break-inside 前端

總體看一下這些屬性對應的位置:web

一、列數和列寬
1.1 列數column-count
column-count:用來指定一個多列元素的列數。瀏覽器

語法:ide

column-count: auto || number複製代碼

autocolumn-count的默認值,當設置爲auto時,元素分欄由其餘屬性決定,好比後面要講的column-width;它還能夠是任何正整數數字,不能帶單位,用來表示多列布局的列數。佈局

須要注意的是,在Firefox和Webkit下仍是須要各自的私有屬性:-moz-webkit,正確的兼容寫法:spa

-moz-column-count: auto || number;
-webkit-column-count: auto || number;
column-count: auto || number;複製代碼

實例:3d

css.columns3{
  -moz-column-count: 3;   
  -webkit-column-count: 3;   
  column-count: 3;
}

.columns4{   
  -moz-column-count: 4;      
  -webkit-column-count: 4;      
  column-count: 4;  
}複製代碼

效果圖:code

1.2 列寬column-width
column-width:用來設置多列布局的列寬。orm

語法:

column-width: auto || length;複製代碼

默認值爲auto,若是設置爲auto或沒有顯式的設置此值時,列寬由其餘屬性來決定,好比:由column-count來決定;此值還能夠用固定值來設置列寬,單位能夠是px或em,但不能是負值。

實例:

/*左圖*/
.columnsWidth1{
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}
/*右圖*/
.columnsWidth2{   
  -moz-column-width: 75px;   
  -webkit-column-width: 75px;   
  column-width: 75px;  
}複製代碼

效果圖:

1.3 columns
columns是複合屬性:

columns: 
  
  
  

  
 
   

 複製代碼

兼容性:兼容性

二、列的間距和分列樣式
2.1 列的間距column-gap
column-gap:用來設置列與列之間的距離。

語法:

column-gap: normal || length;複製代碼

默認值爲normal,W3C建議1em值。此值還能夠是任何非負整數值,單位能夠是px、em、vw等。

兼容寫法:

-moz-column-gap: normal || 
  
  
  

 
  
  ; -webkit-column-gap: normal || 
 
  
    ; column-gap: normal || 
   
     ; 
    
   

 複製代碼

兼容性:兼容性

實例:

.gap{   
  -moz-column-gap: 40px;   
  -webkit-column-gap: 40px;   
  column-gap:40px;   
}複製代碼

效果圖:

注意:column-gap設置的值只做用於列與列之間。

2.2 分列樣式column-rule
column-rule:用來設置列與列之間的邊框寬度、樣式和顏色。

語法:

column-rule: 
  
  
  

 
  
  || 
 
  
    || 
   
     ; 
    
   

 複製代碼

參數說明:
column-rule-width
column-rule-width:用來設置column-rule的樣式,默認值爲「none」,相似於border-width屬性。

column-rule-style
column-rule-style:用來設置column-rule的樣式,默認爲none,此屬性的樣式和border-style的樣式同樣:

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;複製代碼

column-rule-color
column-rule-color:用來設置column-rule的顏色,相似border-color屬性,若是不想顯示顏色,可設置爲transparent(透明色)。

column-rule還能夠拆分開來:

column-rule-width: length;
column-rule-style: style;
column-rule-color: color;複製代碼

兼容寫法:

-moz-column-rule: 
  
  
  

 
  
  || 
 
  
    || 
   
     ; -webkit-column-rule: 
    
      || 
     
       || 
      
        ; column-rule: 
       
         || 
        
          || 
         
           ; 
          
         
        
       
      
     
    
   

 複製代碼

兼容性:兼容性

實例:

.rule1{  
  -moz-column-rule-width: 5px;
  -webkit-column-rule-width: 5px;
  column-rule-width: 5px;
  -moz-column-rule-style:dotted;
  -webkit-column-rule-style:dotted;   
  column-rule-style:dotted;
  -moz-column-rule-color:blue;
  -webkit-column-rule-color:blue;   
  column-rule-color:blue;   
}   

.rule2{   
  -moz-column-rule: 5px double red;   
  -webkit-column-rule: 5px double red;   
  column-rule: 5px double red;   
}複製代碼

效果圖:

注意:column-rule並不會佔據空間位置,看下面的例子:

.rule3{   
  -moz-column-rule: 50px solid red;   
  -webkit-column-rule: 50px solid red;   
  column-rule: 50px solid red;   
}複製代碼

效果圖:

從上面的例子能夠看出,column-rule-width增大並不會影響列的佈局,只是將其往元素兩邊擴展。

三、跨越列
column-span:指定某個元素跨越多少列。

語法:

column-span: none || all;複製代碼

默認值爲none,表示不跨越任何列;all表示元素跨越全部列。

兼容寫法:

-webkit-column-span: none || all;
column-span: none || all;複製代碼

兼容性:兼容性

實例:

.columns{   
  border:1px solid #000;   
  padding:10px;   
  width:350px;   
  columns:auto 3;   
}   
h2{   
  -webkit-column-span:all;   
  column-span:all;   
}複製代碼

效果圖:


標題h2按列的佈局跨越了三列布局,也就是當前的全部列。

五、填充列
column-fill:用來設置元素全部列的高度是否統一。

語法:

column-fill: auto || balance;複製代碼

默認值爲auto,表示列高度自適應內容;此值設爲balance時,全部列的高度以其中最高的一列統一。

兼容寫法:

-moz-column-fill: auto || balance;
-webkit-column-fill: auto || balance;
column-fill: auto || balance;複製代碼

兼容性:兼容性

五、分欄符
column-break-beforecolumn-break-aftercolumn-break-inside 三個屬性都是用來設置對象什麼時候斷行。

column-break-before:設置或檢索對象以前是否斷行。
column-break-after:設置或檢索對象以後是否斷行。
column-break-inside:設置或檢索對象內部是否斷行。

語法:

-webkit-column-break-before
column-break-before

-webkit-column-break-after
column-after

-webkit-column-break-inside
column-break-inside複製代碼

目前僅支持Webkit瀏覽器,同時須要加上私有屬性。

相關文章
相關標籤/搜索