css3的多列布局

columns屬性

columns屬性是一個簡寫屬性

column-count屬性:定義列的數量

column-width屬性:定義列的寬度

 

column-count屬性用於設置列的數量或者容許的最大列數

auto:默認值，用於表示列的數量由其餘css屬性決定

number:必須是正整數，用於表示定義列的數量

 

column-width 屬性用於設置列的寬度或者列的最小寬度

auto:默認值，用於表示列的寬度由其餘css屬性決定

length:必須是正整數，用於表示定義列的寬度

 

列的間距

column-gap 屬性用於設置列於列之間的間距，該屬性須要爲多列顯示時的元素設置

normal:用於表示使用瀏覽器定義列的默認間距，默認值是1em

length:必須是正整數，用於表示定義列之間的間距

 

列的邊框

column-rule屬性用於定義列於列之間的邊框，其中包括邊框寬度，邊框顏色以及邊框樣式

column-rule-width

column-rule-color

column-rule-style

 

橫跨多列

column-span屬性用於定義一個列元素是否跨列

none:表示元素不跨列

all:表示元素跨全部列

 

列的填充

column-fill屬性用於定義列的高度是由內容決定，仍是統一高度

auto:默認值，用於表示列的高度由內容決定

balance:用於表示列的高度根據內容最多的一列高度爲準

 

<div class="parent">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
</div>
<div class="parent2">
   <div class="col5"></div>
</div>

.parent,.parent2{
   /*column-count: 4;
   column-width: 300px;*/
   columns: 4 300px; /*簡寫*/

   column-gap:20px;
   column-rule:5px red double; /*設置間隙的邊框*/

   column-span:all;
}

.col1,.col2,.col3,.col4,.col5{
   height:300px;
   
}
.col1{
   background:red;
}
.col2{
   background:#ccc;
}
.col3{
   background:orange;
}
.col4{
   background:yellow;
}.col{   background:blue;}