在用div布局時，總會碰到各種各樣的問題，有些還非常怪異，總之讓人頭大。不過當你找到了竅門，你就會把它當作是一門藝術來看待了，真的非常有趣。
現在先來談談關於三行兩列的布局［左欄固定，右欄自適應寬度］之一，我能想到比較好的辦法是使用margin漂浮法。
先說說要做成這件事，要做些什麼，會碰到些什麼問題。要讓右欄自適應寬度，也就是說隨著瀏覽器解析度的不同而發生相應變化。同時左欄又如何做到固定在某個位置，而且寬度固定呢？很簡單，只需要右欄從自身寬度裡讓出一些給左欄就行了，也就是預留出leftmargin，而右欄仍保持原來的效能自適應。現在就是如何讓左欄固定在左邊的問題了。大家都知道，讓某塊居左或居右可以通過float來解決，只需要選擇其值為left或right，讓該塊浮動在某個位置就ok。
］css部分：
body
#dyhead
#dyleft
#dyright
#dyfoot
div
以上的樣式中，body沒什麼說，基本的一些定義；div總體的定義了一下所有div的背景色及邊框樣式；#dyhead定義頭部以5px的間距和下面的內容分開；#dyfoot則和#dyhead相反，以5px的間距和上面的內容分開，只不過這裡多用了乙個clear，用於清除上面內容中使用float的影響；#dyleft定義了自身的寬，而且定義了float為left，就是為了使自己始終浮在左邊；#dyright一目了然，margin-left為左欄預留了210px的空間，反觀#dyleft只用了200px定義自身，剩下的10px自然就成了兩欄之間的間距了。
xhtml部分：頭部
左欄固定
寬度為200px
右欄寬度自適應底部
以上就是使用margin漂浮法作出的［左欄固定，右欄自適應寬度］布局，為了區分開左右的位置，我預留了兩欄之間的間隔為10px，當然這在真正做web的時候為了美觀也是要的。在效果演示頁面能看到，或者直接把以上**拷到本地也行。整個布局十分簡單，思路也比較清晰，希望有更好意見的朋友多多交流。
*題外話：其實這個布局不需要用到margin漂浮，一樣能很簡單的實現。步驟：左欄依然如此，右欄不需要任何設定，效果依然為「左欄固定，右欄自適應寬度」。只是考慮到後面更複雜的東西，這樣的表現會不大完美。就如，要清晰分開兩欄就不易。
三行兩列右列固定左列自適應寬度的CSS
dsclub,兀兒 幹部 meta name content 任兀 meta content name keywords title xhml1.0 doc title style type text css id internalstyle body p header maincontent ri...
左中右三欄網頁寬度自適應布局方法
三種方法 絕對定位 margin負值 自身浮動。簡潔實用，無相容問題。第一種 絕對定位 demo div標籤的順序隨意，在css裡都有位置設定，接下來的兩個方法對順序有要求。如果中間欄或內部元素設定了寬度，瀏覽器寬度過小的情況下會出現重疊。第二種 margin負值 demo 較難理解，有一定抗性 布...
CSS三欄布局 中間固定兩邊自適應寬度
w3cplus 今天早上在阿當大俠的編寫高質量前端 群中與幾位朋友一起 和學習了一種用div css進行的三列 三欄 布局，而且是中間固定左右兩邊自適應寬度，聽起來蠻有意思的。因為以前只是碰到過，左右兩列固定而中間自適應的運用。於是思考一下馬上敲起了鍵盤自己實戰了一下，接著與大家一起測試，還是通過了...