columns[ˈkɑ:ləm] 多列布局
與之相關的屬性或子屬性如下所示
一、columns 整合column-width和column-count兩個屬性
二、column-width 定義每列列寬度
屬性值如下所示:
1、auto 預設值,自適應
2、長度值 設定列寬。此處的列寬在功能上相當於最小寬度
三、column-count 定義分列列數
屬性值如下所示
1、auto 預設值,自適應。根據視窗寬度和column-width的設定,決定顯示幾列。
2、數值 設定列數。此處的列數相當於最大列數,具體顯示要看column-width是使用
自適應,還是使用長度值。
四、column-gap 定義列間距
五、column-rule 定義每列中間的分割線
列邊線不會影響到布局(功能上類似於輪廓outline),它會根據布局的縮放自我調整是否顯示。
以上5個屬性是經常使用的多列布局屬性
六、column-span 定義多列布局中子元素跨列效果,firefox不支援,只有 chrome 和 opera 支援 column-span 屬性。
此功能類似於**元素中列元素的colspan屬性,你可以用來設定文章標題(橫跨
所有列)
屬性值如下所示
1、none 預設值,表示不跨列
2、all 表示跨所有列
注意:column-span屬性必須用在塊級元素中,若在行內元素中使用,則沒有任何效果
七、column-fill 控制每列的列高效果,主流瀏覽器不支援
注意:多列布局屬性css3標準格式支援度較低,請在標準格式之前加上帶字首的樣式
CSS3 多列布局 Columns
為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局,w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面,這種布局在報紙和雜誌上都使用了幾十年了,但要在web頁面上實現這樣的效果還是有相當大的難度,慶幸的是...
CSS3 多列屬性columns
屬性 簡介columns css3 columns 屬性,是復合屬性,設定或檢索物件的列數和每列的寬度。column width css3 column width 屬性,設定或檢索物件每列的寬度 column count css3 column count 屬性,設定或檢索物件的列數 column...
CSS3多列布局 columns 的用法
css3中新出現的多列布局 multi column 是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道,當一行文字太長時,讀者讀起來就比較費勁,有可能讀錯行或讀序列 人們的視點從文字的一端移到另一端 然後換到下一行的行首,如果眼球移動浮動過...