columns屬性 多列布局

2021-07-26 03:35:20 字數 1007 閱讀 9397

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開發人員輕鬆的讓文字呈現多列顯示。我們知道,當一行文字太長時,讀者讀起來就比較費勁,有可能讀錯行或讀序列 人們的視點從文字的一端移到另一端 然後換到下一行的行首,如果眼球移動浮動過...