網頁實現并列布局的7種方式
首先說明要求,實現3個容器并列布局,如下圖所示:
這種題在web前端css部分筆試題中經常出現.通過這題能考察出應聘者對css的掌握程度,其考察的面非常廣.公司里剛來的前端我也給他出了這樣一題,不過我說的至少寫出3種實現方式.當時自己想到的有5種實現方式,后來回來一總結才發現可以有7種實現方式滿足上述要求,但不限于7種.我目前只能想到這幾種.所以特做總結,和大家分享.
1.最常用的方式:float
這是最常用的一種方式,利用float屬性向左或右浮動便可實現。
主要html代碼：
|
1
2
3
|
<DIV id=c1><DIV id=c2><DIV id=c3> |
主要css代碼：
|
1
2
3
4
5
6
7
|
#c1,#c2,#c3{ width:200px; height:400px; background-color:#459898; float:left; margin:20px;} |
2.利用table布局實現
這也算是很早以前較常使用的方式。
主要html代碼：
|
1
|
<TABLE><TBODY><TR><TD><DIV id=c1> id=c2> id=c3> |
3.使用position:absolute絕對定位實現
主要html代碼：
|
1
2
3
|
<DIV id=c1><DIV id=c2><DIV id=c3> |
主要css代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#c1,#c2,#c3{ width:200px; height:400px; background-color:#459898; position:absolute;}#c1{ top:20px; left:20px;}#c2{ top:20px; left:260px;}#c3{ top:20px; left:500px;} |
4.利用position:relative相對定位實現
主要的css代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#c1,#c2,#c3{ width:200px; height:400px; background-color:#459898; position:relative;}#c2{ top:-400px; left:240px;}#c3{ top:-800px; left:480px;} |
5.利用display:inline-block實現
對于這種方式,有高手推薦完全用這個屬性來取代float.大家自行斟酌吧。
主要的css代碼:
|
1
2
3
4
5
6
7
|
#c1,#c2,#c3{ width:200px; height:400px; background-color:#459898; margin:20px; display:inline-block;} |
6.利用display:table來實現
該方法類似于table布局實現.
主要html代碼：
|
1
2
3
4
5
6
7
|
<DIV id=container><DIV id=row><DIV id=c1><DIV id=c2><DIV id=c3> |
主要的css代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#container{ display:table;}#row{ display:table-row;}#c1,#c2,#c3{ width:200px; height:400px; background-color:#459898; border-right:40px solid #fff; display:table-cell;} |
7.利用css3新屬性column實現
這種方法可能是大家最陌生的一種,ie8及以下瀏覽器都不支持。
主要html代碼：
|
1
2
3
4
5
|
<DIV id=container><DIV id=c1><DIV id=c2><DIV id=c3> |
主要的css代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#container{ width:700px; -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-width: 200px; -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-width: 200px; column-count: 3; column-gap: 20px; column-width: 200px;}#c1,#c2,#c3{ width:200px; height:400px; background-color:#459898;} |
希望大家能給出更多的實現方案以前分享.博客也很久沒更新了,主題最近一段時間也沒進展.
Copyright@ 2011-2016 版權所有：大連千億科技有限公司 遼ICP備11013762-3號 google網站地圖 百度網站地圖 網站地圖
公司地址：大連市沙河口區中山路692號辰熙星海國際2317 客服電話：0411-39943997 QQ：2088827823 37482752
法律聲明：未經許可，任何模仿本站模板、轉載本站內容等行為者，本站保留追究其法律責任的權利！ 隱私權政策聲明
