1.css3中可以建立多列來對文字或者區域進行布局
2.屬性:
column-count 文字列
column-gap 文字寬度
column-rule 文字線條
3.下面是個例子:
在.html檔案中:
1在.css檔案中:doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>動畫
title
>
6<
link
rel="stylesheet"
type
="text/css"
href
="style05.css"
>
7head
>
8<
body
>
9<
div
class
="div1"
>
1011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
5253
5455
5657
5859
6061
6263
6465
6667
6869
7071
7273
7475
7677
7879
8081
8283
8485
8687
8889
90div
>
91body
>
92<
html
/>
1執行結果:.div1
注意:column-rule 效果沒有出現,不知道什麼原因,各位知道請指點指點!
CSS多列布局
多列布局適合純文字版式設計,如報紙內和雜誌類網頁布局,不適合做網頁結構布局。靈活使用多列布局特性,可以實現在多列中顯示文字和,從而節省大量的網頁空間。如果網頁上的文字很長,多列布局特性就能夠發揮它的用武之地。相容性參考 columns是多列布局特性的基本屬性,類似邊框特性中的border屬性,該屬性...
CSS 多列等高
高度不一的列以等高方式布局。設計師說某頁面的新聞介紹,由於新聞內容不同導致顯示區域的高度不一致,現需要使其高度視覺上保持一致。小加同學覺得必須迅速解決,讓設計師妹妹知道我們程式師哥哥的威武。原型設計稿大致如下 直接使用bootstrap的col 來實現這個簡單的布局就ok啦 class sectio...
CSS多列布局
效果 我的爸爸剛剛30出頭,他的面容,要比他的年齡,成熟穩重的多,但是,他可沒有蒼老憔悴哦!爸爸的身高有180公分,體重75公斤,是個標準的型男身材。如果,我說我爸爸是個大帥哥,可一點也沒有撒謊呢!在我們小區裡,就組建了乙個籃球隊,爸爸,可是他那隊裡的佼佼者呢!每當,我們小區和其他小區,有籃球比賽的...