我喜歡的彈性布局

最近由於某些原因，導致我不得不把注意力從原來的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定位，它就不會隱藏里面的被定過位的層。不信你就試下吧。