一個入門的DIV+CSS布局問題：一個寬度不確定的DIV里面放三個水平對齊的DIV，左右兩個DIV寬度固定為150px，中間那個DIV充滿剩余的寬度。
說明：代碼非真實情況下使用，所以直接簡單。
沒耐心的直接看最后解答。
1. 我的第一反應：
<div style="width:500px;"> <div id="px1" style="float:left; height:100px; width:150px; background-color:gray;"></div> <div id="px2" style="float:left; height:100px; width:auto; background-color:red;"></div> <div id="px3" style="float:left; height:100px; width:150px; background-color:green;"></div> </div>
然后發現不對，中間紅色的div根本就沒有顯示：
圖1
2. 百度看到一個CSDN問答，4樓 的答案如下：
這是比較典型的一個三欄布局 給你思路吧
左右兩個可以用絕對定位 讓他們分別left:0;和right:0;
然后中間的元素不定寬度 讓他們的margin-left和margin-right分別對應左右兩欄的寬度就好了
修改后：
<div style="width:500px;" > <div id="px1" style="position:absolute; left:0px;top:0px;height:100px; width:150px; background-color:gray;"></div> <div id="px2" style="float:left; height:100px;margin-left:150px;margin-right:150px; width:100%; background-color:red;"></div> <div id="px3" style="position:absolute; right:0px;top:0px;height:100px; width:150px; background-color:green;"></div> </div>
結果如下：（淺灰色是html頁面背景顏色）
圖2
很明顯，這不符合預期。左右2個div的 定位出現問題了，不是以 父div 來定位，而是以 窗口 為 父元素定位了。於是我在w3cshool詳細了解才發現：
absolute: 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
就是說現在左右2個div的父元素是 static 定位（static是默認的定位方式），不符合absolute的定位要求。那怎么辦，把那個父div也改為 position: absolute （或者position: relative）唄，於是
3. 修改父元素為非static定位
<div style="width:500px;position:absolute;left:200px;top:100px;" > <div id="px1" style="position:absolute; left:0px;top:0px;height:100px; width:150px; background-color:gray;"></div> <div id="px2" style="float:left; height:100px;margin-left:150px;margin-right:150px; width:100%; background-color:red;"></div> <div id="px3" style="position:absolute; right:0px;top:0px;height:100px; width:150px; background-color:green;"></div> </div>
結果是：（淺灰色是html頁面背景顏色）
圖3
可以發現：左右2個 absolue 的div元素都乖乖的沒有問題，倒是中間的紅色div 明顯變長了，突出了一部分。用Chrome調試，發現是右邊的綠色div覆蓋在了中間的紅色div上，並且紅色div整體是 寬500px。
應該說，它的 margin-left 起作用了，但是寬度100%，卻變成了寬度500px，並且仿佛 margin-right 絲毫不起作用。
【后經GK同學指導：margin-right起作用了，只是它透明了看不見。至於紅色超出部分可以給 父div設置屬性：overflow:hidden解決，這里也還有問題，見5】
4. 去掉 margin-*
后來把 margin-left 去掉，發現正常了。（其實就是綠色和灰色把紅色的左右兩邊遮住了而已，其實紅色還是500px）。
<div style="width:500px;position:absolute;left:200px;top:100px;" > <div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:green;"></div> <div id="px2" style="float:left; height:100px; width:100%; background-color:red;"></div> <div id="px3" style="position:absolute; right:0px;height:100px; width:150px; background-color:gray;"></div> </div>
結果就正常了：
圖4
但是也就看上去正常，但感覺不是符合要求，並沒有充滿“剩余寬度”，而是直接充滿“全部寬帶”，然后被左右2個absolute的div遮住了左右寬度。
如果寫上文字，會發現（中間的div文字被遮住了）：
圖5
5.父div添加overflow的問題（上接3）
<div style="width:500px;position:absolute;left:200px;top:100px;overflow:hidden" > <div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:gray;">一二三四五六七八九十一二三四五六七八九十</div> <div id="px2" style="float:left; height:100px;margin-left:150px;margin-right:150px; width:100%; background-color:red;">一二三四五六七八九十一二三四五六七八九十</div> <div id="px3" style="position:absolute; right:0px;height:100px; width:150px; background-color:green;">一二三四五六七八九十一二三四五六七八九十</div> </div>
結果如圖：中間div的文字被右邊遮住了，問題只是被簡單的隱藏了。並沒有解決。
圖6
6、先貼出一個完美辦法，GK同學的。很清晰，很明確。
<html> <head> <title>TEST</title> <style type="text/css"> * { margin: 0; padding: 0; } .d0 { width: 40%; height: 200px; margin: 0 auto; position: relative; min-width: 300px; } .d1 { position: absolute; left: 0; top: 0; width: 150px; height: 100%; background-color: #CF4D4D; } .d2 { width: auto; padding: 0 150px; height: 100%; background-color: #8F8FCF; } .d3 { position: absolute; right: 0; top: 0; width: 150px; height: 100%; background-color: #62C262; } </style> </head> <body style="background-color:#CCCCCC"> <div class="d0"> <div class="d1"><p>左邊的內容左邊的內容左邊的內容左邊的內容左邊的內容左邊的內容</p></div> <div class="d2"><p>中間的內容中間的內容中間的內容中間的內容中間的內容中間的內容</p></div> <div class="d3"><p>右邊的內容右邊的內容右邊的內容右邊的內容右邊的內容右邊的內容</p></div> </div> </body> </html>
結果如下圖：
圖7
這里有個更好的文章，講解三欄布局。
后記：（2014年2月20日）
最近又看了一次本文，上面有些啰嗦。之所以一直不對，是我對下面2個知識點沒理解。
width: auto 和 width: 100%
margin 和 padding
GK同學方法之所以奏效，他用的是
width: auto 和 padding:0 150px
而我用的則是
width: 100% 和 margin: 0 150px
這二者的區別就是：
width: 100% 就是自己和父元素的寬度一樣是500px，接着 margin: 0 150px，就是自己左邊離父元素邊界有150px，這么算，自己中間的div自然會超出一部分。
並且中間div的一部分會被右邊（綠色）的div給遮住一部分。如圖3。
width: auto 由瀏覽器自己計算div的寬度。GK同學代碼里，由於左右div是絕對定位，不在文檔流中，中間div自動充滿整個父元素，只不過左右被 左邊和右邊的div遮住了。但是，有趣的是，
他用的是 padding: 0 150px，這樣，中間div內容區域就不會被遮住。如下圖：
圖8
這里關鍵理解 CSS 中盒模型的 width 指什么區域：
圖9