轉自http://www.zendstudio.net/post/52/
一直都不斷有人在問：“我要用DIV+CSS實現三列布局，並且要左右固定寬度，中間自適應，要怎麼弄？”
我一般都是這樣回答：“中間設margin-left留出leftdiv的寬度，設margin-right留出rightdiv的寬度，然後leftdiv左浮動，rightdiv右浮動！”，不過居然有人說不行。我只好用實踐證明我的真理的正確性。
OK!下面是我的完整的測試代碼。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>無標題文檔</title>
- <style type="text/css">
- <!--
- * {
- margin:0;
- padding:0;
- }
- .box{
- width:100%;
- font-size:12px;
- }
- .leftdiv{
- float:left;
- width:200px;
- height:600px;
- background:#f00;
- }
- .middlediv{
- background:#0f0;
- height:600px;
- margin:0 200px;
- }
- .rightdiv{
- float:right;
- width:200px;
- height:600px;
- background:#00f;
- }
- .clearfix{
- clear:both;
- font-size:0;
- height:0;
- }
- -->
- </style>
- </head>
-
- <body>
- <div class="box">
- <div class="leftdiv">此處顯示 class "leftdiv" 的內容</div>
- <div class="rightdiv">此處顯示 class "rightdiv" 的內容</div>
- <div class="middlediv">此處顯示 class "box" 的內容</div>
- <div class="clearfix">此處顯示 class "clearfix" 的內容</div>
- </div>
- </body>
- </html>
一定注意三個DIV的順序！沒有修複IE 3px bug，但幾乎不影響表現。以上代碼在IE 6、FF中測試通過。
從此推斷，兩列的布局就是去掉右邊的DIV，然後中間去掉margin-right。
