HTML css多列布局

2021-07-03 10:06:18 字數 1158 閱讀 2675

在css3中,也新增了一些關於文字布局的幾個比較簡單的屬性。通過這些新增的屬性,我們可以對文字進行簡單的排版,就想報紙和雜誌那樣。

新增的部分屬性,以及瀏覽器支援情況:

屬性瀏覽器支援

column-count

iefirefox(-moz-)

chrome(-webkit-)

safari(-webkit-)

opera

column-gap

iefirefox(-moz-)

chrome(-webkit-)

safari(-webkit-)

opera

column-rule

iefirefox(-moz-)

chrome(-webkit-)

safari(-webkit-)

opera

注:新增的屬性以及描述:

屬性描述

column-count

定義元素應該被分隔的列數

column-fill

定義列的填充方式

column-gap

定義列之間的間隔距離

column-rule

column-rule屬性的簡寫屬性,定義列之間的規則

column-rule-color

定義列之間的規則顏色

column-rule-style

定義列之間的規則樣式

column-rule-width

定義列之間的規則寬度

column-span

定義元素應該橫跨的列數

column-width

定義列的寬度

columns

column-width 和 column-count 的簡寫屬性

通過這幾個新增屬性的定義,我可以對文字進行簡單的排版(firefox瀏覽器)

*
上面的css樣式是元素中的文字分為3列,列之間的距離為40px,列之間用顏色為#ff0000、寬度為4px的線分開。

同樣,我們也可以對一些元素中的內容進行排版。

部分**為(firefox瀏覽器):

兩列布局 多列布局

用css html編寫乙個兩列布局的網頁,要求右側寬度為200px,左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...

CSS 多列布局 三列布局

下面的 演示了3列布局的用法。html head title 三列布局 styletype text css body column1of3,column2of3,column3of3 body h1style color 706fd3 軟體開發,成就夢想 h2 ahref 學程式設計,上利永貞網 ...

CSS多列布局

多列布局適合純文字版式設計,如報紙內和雜誌類網頁布局,不適合做網頁結構布局。靈活使用多列布局特性,可以實現在多列中顯示文字和,從而節省大量的網頁空間。如果網頁上的文字很長,多列布局特性就能夠發揮它的用武之地。相容性參考 columns是多列布局特性的基本屬性,類似邊框特性中的border屬性,該屬性...