DIV CSS 佈局教程網

5.采用負的左右邊界和相對定位

下面的例子能較好地解決列高度相同的問題。
三行二列布局，主要內容在左邊，網頁寬度750px,左列580px,右列170px。
CSS代碼：
ExampleSourceCode

#middle{  
width:580px;  
float:left;  
background:#FFFFFF;  
text-align:left;  
}  
#sideleft{  
width:580px;  
float:left;  
position:relative;  
margin-left:-580px;  
}  
#sideright{  
width:170px;  
float:right;  
position:relative;  
margin:0-170px00;  
background:#F0F0F0;  
}  
 
xHtml代碼：  
ExampleSourceCode  
<dividdivid="middle"> 
<dividdivid="sideright"> 
<dividdivid="sideleft"> 
div> 
div> 
div> 
 

從結構看，middle（使用的是左列希望的背景色）在最外面，寬度等於sideleft的寬度，往裡一層是sideright，其寬度為170px,浮動方向是右邊。但其右面的邊界是負的170px，相當於將sideright拉向右面（右面緊貼著middle的右邊）170px的位置。而sideleft又是套在sideright裡面的，其內容先於sideright出來，左邊界是負的580，相當於在sideright左邊580px，此時sideleft和middle位置重合。

◆優點：不需要背景圖片，無hacks，完全的自適應高度。

◆缺點：現在的代碼只能左對齊。