《转》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将其拉回来，就ＯＫ了，大家可以看下在的代码：

#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下也就安全了。

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