我喜歡的流體布局

最近由於某些原因，導致我不得不把注意力從原來的JS轉到CSS上，儘管我現在已經不太想搞CSS了，但現實就是這樣不盡人意，沒有辦法。那今天我就說說我所喜歡的流體布局吧，看到網上很多關於兩欄布局中要求一欄固定寬度，另一欄自適應，三欄布局，兩側固定寬度，中間欄自適應的做法都是用到一絕對位置，如：

<div class="outer">　　<div class="left">左側</div>　　<div class="main">中間自適應</div>   <div class="right">右側</div></div>

CSS:

.outer { margin:100px auto;position:relative;}.outer div { height:300px;}.left,.right {position:absolute;top:0;}.left {width:100px;left:0;background:red;}.right {width:200px;right:0;background:green;}.main {margin:0 210px 0 110px;background:blue;}

這樣中介層就可以自適應寬度了，本身這樣的布局並沒有什麼問題，但是總是感覺不夠靈活，比如說將來想要修改兩側的寬度，或者說去掉一個或兩個側邊欄，這個時候就不得不重新計算main的margin-left和margin-right了，有點麻煩，那有沒有更加靈活的實現方法呢？嗯，還真的有：

HTML:

<div class="outer">    <div class="left">左側</div>    <div class="right">右側</div>    <div class="main">中間自適應</div></div>

CSS:

.outer { margin:100px auto;}.outer div { height:300px;}.left { float:left; width:100px; margin-right:10px;_display:inline; background:red;}.main { display:table-cell;width:2000px;*display:block;*width:auto; *overflow:hidden;zoom:1; background:blue;}.right{float:right;width:100px;margin-left:10px; _display:inline; background:green;}

這樣寫，中介層與兩側基本上就沒多大關係了，想要修改兩側的寬度，直接改它自己的寬度就可以了，想讓三欄變兩欄，直接去掉一欄就可以了，哪怕是想變成一樣，兩側都去掉，也不用去修改樣式，計算間距什麼的，很方便，不是麼。估計有個看到了那個overflow:hidden,擔心如果裡面的層需要顯示到外面的時候被隱藏掉，就像做提示效果的時候，這個不用擔心的，只要不給.main定位，它就不會隱藏裡面的被定過位的層。不信你就試下吧。