我喜欢的弹性布局

最近由于某些原因,导致我不得不把注意力从原来的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定位,它就不会隐藏里面的被定过位的层。不信你就试下吧。

posted @ 2013-05-01 10:08  zjhsd2007  阅读(2387)  评论(4编辑  收藏  举报