在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屬性,該屬性...