<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常用的五種DIV布局方法-by采風(fēng)浪人</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Header">
</div>
<div id="PageBody">
</div>
<div id="Footer">
</div>
</body>
</html>
Css代碼:
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
}
#Header, #PageBody, #Footer{
width:900px;
margin:0 auto;
}
#Header{
height:100px;
background:#003366;
}
#PageBody{
height:1000px;
border:1px #000000 solid;
}
#Footer{
height:200px;
background:#990000;
}
2 、左右布局
│ ├#Sidebar {} /*側(cè)邊欄*/
│ └#MainBody {} /*主體內(nèi)容*/
1） 指定左右兩列的寬度，只需要將左邊的div 向左浮動(dòng){float:left;}，右邊的div 向右浮動(dòng){float:right;}，并清除浮動(dòng)，即可實(shí)現(xiàn)。
Html代碼:
<div id="PageBody">
<div id="Sidebar"></div>
<div id="MainBody"></div>
</div>
Css代碼:
/* 左右布局開始 */
#Sidebar{
width:200px;
height:100%;
background:#000000;
float:left;
}
#MainBody{
width:700px;
height:100%;
float:right;
background:#6600CC;
}
/* 左右布局結(jié)束 */
注：右邊的div 向左浮動(dòng)#MainBody {float:left;}也是可以，因?yàn)?wbr>#Sidebar和#MainBody是包含在#PageBody這里沒(méi)有清除浮動(dòng)也是沒(méi)有問(wèn)題的。
清除浮動(dòng)有三種方式：
a、通過(guò)在浮動(dòng)元素的父級(jí)元素上添加清除浮動(dòng)的class類;
<div id="PageBody" class="clear">
<div id="Sidebar"></div>
<div id="MainBody"></div>
</div>
b、通過(guò)在浮動(dòng)元素后面添加一個(gè)空元素，然后在這個(gè)空元素上定義clear:both來(lái)清除浮動(dòng)；
<div id="PageBody" class=”clear”>
<div id="Sidebar"></div>
<div id="MainBody"></div>
<div class="clear"></div>
</div>
C、在下一個(gè)div的css里加入clear:both來(lái)清除浮動(dòng)；
假設(shè)上面的div布局里沒(méi)有# PageBody
<div id="Header">
</div>
<div id="Sidebar"></div>
<div id="MainBody"></div>
<div id="Footer">
</div>
# Footer{
cear:both;
}
這種布局方式從顯示效率來(lái)說(shuō)應(yīng)該是最符合DIV輸出的思想的，不過(guò)那樣很容易出錯(cuò)輸出難度會(huì)比較大。具體用那種方式布局就看個(gè)人的喜好和頁(yè)面的效果圖來(lái)確定。
2） 不指定寬度布局
a、 左邊指定寬度，右邊指定寬度，左在上，右在下；(此處的上和下是指在html代碼中從上到下編寫順序中的位置，下文皆同) 這種布局方法與左右定寬布局的方法基本相同，只需要將左邊的div向左浮動(dòng){float:left;}，并清除浮動(dòng)，右邊的div就會(huì)跟在已浮動(dòng)的“div左”后面，即已經(jīng)實(shí)現(xiàn)左右兩列布局了。我們?cè)囍鴮?MainBody的寬度注釋掉就可以看到右邊的寬度是根據(jù)內(nèi)容變化的。
<div id="PageBody">
<div id="Sidebar">左邊導(dǎo)航</div>
<div id="MainBody">右邊內(nèi)容</div>
</div>
#MainBody{
/*width:700px; */
height:100%;
float:right;
background:#6600CC;
}
b、 左邊指定寬度，右邊不指定寬度，左在下，右在上；
為什么要用這種有點(diǎn)奇怪的不合乎常規(guī)的布局方法呢？ 這樣布局當(dāng)然有它自己本身的優(yōu)點(diǎn)的。將右邊div寫在上方，通常是希望在加載網(wǎng)站內(nèi)容時(shí)先顯示右邊的內(nèi)容。
代碼示例如下：
<div id="PageBody">
<div id="MainBody">右邊內(nèi)容</div>
<div id="Sidebar">左邊導(dǎo)航</div>
</div>
/* 左右布局開始 */
#Sidebar{
width:200px;
height:100%;
background:#000000;
float:left;
}
#MainBody{
/*width:700px; */
width:100%;
height:100%;
margin-left:-300px;
float:right;
background:#6600CC;
}
#MainBody .content{
background:#FF9966;
margin-left:200px;
}
/* 左右布局結(jié)束 */
使用左邊指定寬度，右邊不指定寬度，左在下，右在上布局方法的幾個(gè)要點(diǎn)
1）將右邊的div向右浮動(dòng)，并設(shè)一個(gè)負(fù)的margin-left，注意這個(gè)這個(gè)寬帶應(yīng)該大于或等于左邊的寬度；
2）在右邊div里面增加一個(gè)div，用于放右邊的內(nèi)容，計(jì)算出左邊需要留出的寬度，并將此數(shù)據(jù)設(shè)置為該div的margin-left，如{margin-left:200px;}；
3）要是外面沒(méi)有#PageBody包含,浮動(dòng)后一定要在父級(jí)元素或后一個(gè)元素上清除浮動(dòng)；
以上是我們?cè)谶M(jìn)行網(wǎng)頁(yè)布局時(shí)最常用的幾種方式，當(dāng)然在實(shí)際應(yīng)用中還是需要掌握很多技巧的。熟能生巧那是一點(diǎn)不錯(cuò)的，關(guān)鍵在于勤學(xué)苦練。
要讓div居中通常用 margin:0 auto;
另外指定最小高度的自適應(yīng)高度也是比較常用的
<div id="PageBody"> </div>
<div id="clearbox"> </div>
#PageBody{
min-height:100px;
_height:100px;
}
.clearbox {
border-top:1px solid transparent !important;
margin-top:-1px !important;
border-top:0;
margin-top:0;
clear: both;
visibility: hidden;
}
這里你可以把#PageBody看成一個(gè)畫卷,而.clearbox是畫軸。自適應(yīng)高度就是這樣。
好了，到此為止把例子的最終代碼貼上來(lái)：
Index.html
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
