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