CSS3 多列布局 Columns

2021-09-24 20:32:55 字數 398 閱讀 9641

為了能在web頁面中方便實現類似報紙、雜誌那種多列排版的布局,w3c特意給css3增加了乙個多列布局模組(css multi column layout module)。它主要應用在文字的多列布局方面,這種布局在報紙和雜誌上都使用了幾十年了,但要在web頁面上實現這樣的效果還是有相當大的難度,慶幸的是,css3的多列布局可以輕鬆實現。接下來咱們一起學習多列布局相關的知識。

語法:columns: ||

多列布局columns屬性引數主要就兩個屬性引數:列寬和列數。

引數引數說明

主要用來定義多列中每列的寬度

主要用來定義多列中的列數

舉例:要顯示2欄顯示,每欄寬度為200px,**為:

columns: 200px 2;

到目前為止大部分主流瀏覽器都對其支援:

CSS3多列布局 columns 的用法

css3中新出現的多列布局 multi column 是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道,當一行文字太長時,讀者讀起來就比較費勁,有可能讀錯行或讀序列 人們的視點從文字的一端移到另一端 然後換到下一行的行首,如果眼球移動浮動過...

CSS3多列布局 columns 的用法

css3中新出現的多列布局 multi column 是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道,當一行文字太長時,讀者讀起來就比較費勁,有可能讀錯行或讀序列 人們的視點從文字的一端移到另一端 然後換到下一行的行首,如果眼球移動浮動過...

CSS3 多列屬性columns

屬性 簡介columns css3 columns 屬性,是復合屬性,設定或檢索物件的列數和每列的寬度。column width css3 column width 屬性,設定或檢索物件每列的寬度 column count css3 column count 屬性,設定或檢索物件的列數 column...