《转》div 中间固定 左右自适应实现

《转自》:http://www.w3cplus.com/css/layout-column-three

对于我来说,这是一种很少碰到的布局方法,不知道大家有何体会,那么下面我们一起来看这种布局方法的实现过程,同样先来看html代码:

<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>

 

这种方法也是借助于负的margin来实现的,首先我们在中间列定好固定值,因为此值是不会在改变的,接着对其进行左浮动;那么关键地主是在左右边栏设置地方,这种方法是将其都进行50%的宽度设置,并加上中负的左边距,此负的左边距最理想的值是中间栏宽度的一半加上1px,比如说此例中是"540px/2+1"也就是说他们都有一个"margin-left: -271px",这样一来,左右边栏内容无法正常显示,那是因为对他们进行了负的左边距操作,现在只需要在左右边栏的内层div.inner将其拉回来,就OK了,大家可以看下在的代码:

#left,
#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
}

#main {
width: 540px;
float: left;
background: green;
}
    
.inner {
padding: 20px;
}
    
#left .inner,
#right .inner {
margin: 0 0 0 271px;
background: orange;
}

 

具体效果如下:

这种方法如果在ie下会存在布局混乱的bug,你可以将div#right和div#left中的width值稍作修改:

#left,
#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
*width: 49.9%;
}

 

这样一来,在ie下也就安全了。

实现这种效果的方法可能有很多,希望大家有更好的方法能一起分享一起学习。

posted @ 2013-09-25 10:02  蓝夜  阅读(240)  评论(0编辑  收藏  举报