我喜欢的弹性布局

最近由于某些原因，导致我不得不把注意力从原来的JS转到CSS上，尽管我现在已经不太想搞CSS了，但现实就是这样不尽人意，没有办法。那今天我就说说我所喜欢的流体布局吧，看到网上很多关于两栏布局中要求一栏固定宽度，另一栏自适应，三栏布局，两侧固定宽度，中间栏自适应的做法都是用到一绝对定位，如：

?

1 2 3 4 5

<div class="outer"> 　　<div class="left">左侧</div> 　　<div class="main">中间自适应</div>    <div class="right">右侧</div> </div>

CSS:

?

1 2 3 4 5 6

.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:

?

1 2 3 4 5

<div class="outer">     <div class="left">左侧</div>     <div class="right">右侧</div>     <div class="main">中间自适应</div> </div>

CSS:

?

1 2 3 4 5

.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定位，它就不会隐藏里面的被定过位的层。不信你就试下吧。