淺談CSS3多列布局

2018-06-19 18:38 更新
      相信大家都看過報紙，報紙上的內(nèi)容大多數(shù)都是分欄顯示的，如下圖所示：

對于前端攻城獅來說，這種分列布局，在以前雖然可以實現(xiàn)，可是難度卻是不小，工作量很大，必須使用JavaScript對內(nèi)容分段，再配合上絕對定位或浮動等CSS樣式來實現(xiàn)多列布局。但現(xiàn)在，強(qiáng)大的CSS3為我們提供了“multi-column”，讓我們可以很輕松的實現(xiàn)這樣的分列布局。
先來看看與多列布局（multi-column）相關(guān)的css屬性有哪些：
  • 列數(shù)和列寬：column-count、column-width、columns
  • 列的間距和分列樣式：column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule
  • 跨越列：column-span
  • 填充列：column-fill
  • 分欄符：column-break-before、column-break-after、column-break-inside

整體看一下這些屬性對應(yīng)的位置：


1、列數(shù)和列寬
1.1 列數(shù)（column-count）
column-count：用來指定一個多列元素的列數(shù)。

語法：
column-count: auto || number
auto是column-count的默認(rèn)值，當(dāng)設(shè)置為auto時，元素分欄由其他屬性決定，比如后面要講的column-width；它還可以是任何正整數(shù)數(shù)字，不能帶單位，用來表示多列布局的列數(shù)。

需要注意的是，在Firefox和Webkit下還是需要各自的私有屬性：-moz和-webkit，正確的兼容寫法：
-moz-column-count: auto || number;
-webkit-column-count: auto || number;
column-count: auto || number;

實例：
.columns3{
  -moz-column-count: 3;   
  -webkit-column-count: 3;   
  column-count: 3;
}

.columns4{   
  -moz-column-count: 4;      
  -webkit-column-count: 4;      
  column-count: 4;  
}
效果圖：



1.2 列寬（column-width）
column-width：用來設(shè)置多列布局的列寬。

語法：
column-width: auto || length;
默認(rèn)值為auto，如果設(shè)置為auto或沒有顯式的設(shè)置此值時，列寬由其他屬性來決定，比如：由column-count來決定；此值還可以用固定值來設(shè)置列寬，單位可以是px或em，但不能是負(fù)值。

實例：
/*左圖*/
.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是復(fù)合屬性：
columns: <column-count> <collumn-width>

兼容性：兼容性

2、列的間距和分列樣式
2.1 列的間距（column-gap）
column-gap：用來設(shè)置列與列之間的距離。

語法：
column-gap: normal || length;
默認(rèn)值為normal，W3C建議1em值。此值還可以是任何非負(fù)整數(shù)值，單位可以是px、em、vw等。

兼容寫法：
-moz-column-gap: normal || <length>;
-webkit-column-gap: normal || <length>;
column-gap: normal || <length>;

兼容性：兼容性

實例：
.gap{   
  -moz-column-gap: 40px;   
  -webkit-column-gap: 40px;   
  column-gap:40px;   
}
效果圖：


注意：column-gap設(shè)置的值只作用于列與列之間。

2.2 分列樣式（column-rule）
column-rule：用來設(shè)置列與列之間的邊框?qū)挾?、樣式和顏色?/div>

語法：
column-rule: <column-rule-width> || <column-rule-style>  ||  <column-rule-color>;

參數(shù)說明：
  • column-rule-width
column-rule-width：用來設(shè)置column-rule的樣式，默認(rèn)值為“none”，類似于border-width屬性。

  • column-rule-style
column-rule-style：用來設(shè)置column-rule的樣式，默認(rèn)為none，此屬性的樣式和border-style的樣式一樣：
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

  • column-rule-color
column-rule-color：用來設(shè)置column-rule的顏色，類似border-color屬性，如果不想顯示顏色，可設(shè)置為transparent（透明色）。

column-rule還可以拆分開來：
column-rule-width: length;
column-rule-style: style;
column-rule-color: color;

兼容寫法：
-moz-column-rule: <column-rule-width> || <column-rule-style>  ||  <column-rule-color>;
-webkit-column-rule: <column-rule-width> || <column-rule-style>  ||  <column-rule-color>;
column-rule: <column-rule-width> || <column-rule-style>  ||  <column-rule-color>;


兼容性：兼容性


實例：

.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并不會占據(jù)空間位置，看下面的例子：

.rule3{   
  -moz-column-rule: 50px solid red;   
  -webkit-column-rule: 50px solid red;   
  column-rule: 50px solid red;   
}

效果圖：



從上面的例子可以看出，column-rule-width增大并不會影響列的布局，只是將其往元素兩邊擴(kuò)展。


3、跨越列

column-span：指定某個元素跨越多少列。


語法：

column-span: none || all;

默認(rèn)值為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;   
}

效果圖：


標(biāo)題h2按列的布局跨越了三列布局，也就是當(dāng)前的所有列。


5、填充列

column-fill：用來設(shè)置元素所有列的高度是否統(tǒng)一。


語法：

column-fill: auto || balance;

默認(rèn)值為auto，表示列高度自適應(yīng)內(nèi)容；此值設(shè)為balance時，所有列的高度以其中最高的一列統(tǒng)一。


兼容寫法：

-moz-column-fill: auto || balance;
-webkit-column-fill: auto || balance;
column-fill: auto || balance;


兼容性：兼容性


5、分欄符

column-break-before、column-break-after、column-break-inside 三個屬性都是用來設(shè)置對象何時斷行。


column-break-before：設(shè)置或檢索對象之前是否斷行。

column-break-after：設(shè)置或檢索對象之后是否斷行。

column-break-inside：設(shè)置或檢索對象內(nèi)部是否斷行。


語法：

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

-webkit-column-break-after
column-after

-webkit-column-break-inside
column-break-inside

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


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號