1. 程式人生 > >css3多欄佈局

css3多欄佈局

主要屬性:
1、欄寬度屬性column-width
設定分欄佈局中一個欄的寬度值;實際寬度會根據外層盒子的寬度有所調整(可能變大)。

2、欄數量屬性column-count
設定分欄佈局中的總欄數。

3、columns屬性:
上述column-width和column-count的綜合屬性;
使用形式:columns: 欄寬值 欄目數;
實際表現上,當總寬度大於等於“欄寬x欄目數”時,欄目數固定,欄寬可能會有所調整(變大)。
當總寬度小於“欄寬x欄目數”時,欄目數會減少(保證欄寬不小於設定的欄寬)。

4、欄間隙屬性column-gap
設定欄與欄之間的寬度值,預設是font-size大小(比如14px)

5、欄分割線屬性column-rule
欄分割線屬性,就是兩欄之間的線,如果不設定預設就是“空的”,就沒有分割線,只有間隙(gap)。
欄分割線屬性類似邊框線(但只是一條線),可以設定:線寬,線型,線色。
有如下幾個屬性:
column-rule-width:設定線寬,比如1px,5px;
column-rule-style:設定線型,比如solid,dashed,dotted;
column-rule-color:設定線色,比如red, #ff9966, rgb(200,100,0)
column-rule:上述3個屬性的綜合屬性。

 
原文:https://blog.csdn.net/csdn_heshangzhou/article/details/80531633