DIV+CSS 網頁布局第二篇：兩列布局
1、寬度自適應兩列布局
兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。
當元素使用了浮動之后，會對周圍的元素造成影響，那么就需要清除浮動，通常使用兩種方法。可以給受到影響的元素設置 clear:both，即清除元素兩側的浮動，也可以設置具體清除哪一側的浮動：clear:left 或 clear:right，但必須清楚的知道到底是哪一側需要清除浮動的影響。也可以給浮動的父容器設置寬度，或者為 100%，同時設置 overflow:hidden，溢出隱藏也可以達到清除浮動的效果。
同理，兩列寬度自適應，只需要將寬度按照百分比來設置，這樣當瀏覽器窗口調整時，內容會根據窗口的大小，按照百分比來自動調節內容的大小。
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>寬度自適應兩列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:50px;
background:blue;
}
.main-left{
width:30%;
height:800px;
background:red;
float:left;
}
.main-right{
width:70%;
height:800px;
background:pink;
float:right;
}
#footer{
clear:both;
height:50px;
background:gray;
}
</style>
</head>
<body>
<div id="herder">頁頭</div>
<div class="main-left">左列</div>
<div class="main-right">右列</div>
<div id="footer">頁腳</div>
</body>
</html>
2、固定寬度兩列布局
寬度自適應兩列布局在網站中一般很少使用，最常使用的是固定寬度的兩列布局。
要實現固定寬度的兩列布局，也很簡單，只需要把左右兩列包裹起來，也就是給他們增加一個父容器，然后固定父容器的寬度，父容器的寬度固定了，那么這兩列就可以設置具體的像素寬度了，這樣就實現了固定寬度的兩列布局。
新聞熱點
疑難解答
