網(wǎng)頁(yè)實(shí)現(xiàn)并列布局的7種方式
首先說(shuō)明要求,實(shí)現(xiàn)3個(gè)容器并列布局,如下圖所示:
這種題在web前端css部分筆試題中經(jīng)常出現(xiàn).通過(guò)這題能考察出應(yīng)聘者對(duì)css的掌握程度,其考察的面非常廣.公司里剛來(lái)的前端我也給他出了這樣一題,不過(guò)我說(shuō)的至少寫出3種實(shí)現(xiàn)方式.當(dāng)時(shí)自己想到的有5種實(shí)現(xiàn)方式,后來(lái)回來(lái)一總結(jié)才發(fā)現(xiàn)可以有7種實(shí)現(xiàn)方式滿足上述要求,但不限于7種.我目前只能想到這幾種.所以特做總結(jié),和大家分享.
1.最常用的方式:float
這是最常用的一種方式,利用float屬性向左或右浮動(dòng)便可實(shí)現(xiàn)。
主要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布局實(shí)現(xiàn)
這也算是很早以前較常使用的方式。
主要html代碼：
|
1
|
<TABLE><TBODY><TR><TD><DIV id=c1> id=c2> id=c3> |
3.使用position:absolute絕對(duì)定位實(shí)現(xiàn)
主要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相對(duì)定位實(shí)現(xiàn)
主要的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實(shí)現(xiàn)
對(duì)于這種方式,有高手推薦完全用這個(gè)屬性來(lái)取代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來(lái)實(shí)現(xiàn)
該方法類似于table布局實(shí)現(xiàn).
主要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實(shí)現(xiàn)
這種方法可能是大家最陌生的一種,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;} |
希望大家能給出更多的實(shí)現(xiàn)方案以前分享.博客也很久沒更新了,主題最近一段時(shí)間也沒進(jìn)展.
Copyright@ 2011-2016 版權(quán)所有：大連千億科技有限公司 遼ICP備11013762-3號(hào) google網(wǎng)站地圖 百度網(wǎng)站地圖 網(wǎng)站地圖
公司地址：大連市沙河口區(qū)中山路692號(hào)辰熙星海國(guó)際2317 客服電話：0411-39943997 QQ：2088827823 37482752
法律聲明：未經(jīng)許可，任何模仿本站模板、轉(zhuǎn)載本站內(nèi)容等行為者，本站保留追究其法律責(zé)任的權(quán)利！ 隱私權(quán)政策聲明
