CSS三栏布局——中间固定两边自适应宽度

作者：大漠 日期：2011-08-05 点击：3400
布局
Layout
templates

今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下，接着与大家一起测试，还是通过了各浏览器的考验，为了方便自己以后好查阅，也想让不知道的朋友一起学习一下这样的布局，特整理了一下代码，贴上来与大家一起分享和学习。

在讲这种布局之前，我还想和大家一起回想一下三列布局中的另一种，就是左右两列固定，中间自适应宽度。这种布局方法，网上问问Ｇ爸和度娘一定会有一大堆，但我还是要重复说说，方便自己今后查阅，记性太差，没办法。别的先不说了，就开始进入主题吧。对于两边固定中间一列自适应的布局方法，我最早使用的是绝对定位法。先看代码

<div id="left">左边栏</div>
<div id="right">右边栏</div>
<div id="main">主内容</div>

比如说，我左右两列都是220px，中间宽度自适应，那么我们使用绝对定位实现的方法是这样的

html,body {
margin:0;
padding:0;
height: 100%;
}

#left,
#right {
position: absolute;
top:0;
width: 220px;
height: 100%;
}

#left {
left:0;
}

#right {
right:0;
}

#main {
margin: 0 230px;
height: 100%;
}

这种方法是最简单，也是麻烦最多的，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。我个人现在不在建议使用这种布局。

第二种方法采用的是浮动布局

这种方法和上面的绝对定位方法很相似，只不过这里采用的是浮动，而不是绝对定位，先来看其html代码

<div id="left">left </div>
<div id="right">right</div>
<div id="main">mian</div>

这种方法我利用的就是浮动原理，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面，如上面的html代码所示，下面我们一起来看看其css样式是怎么实现的

#left,
#right {
float: left;
width: 220px;
height: 200px;
background: blue;
}
		
#right{
float: right;
}
		
#main {
margin: 0 230px;
background: red;
height: 200px;
}

是不是好简单一种方法呀，大家可以在本地机子上动手测试一下，效果如下所示：

第三种方法：负的margin

使用这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，先来看其代码吧

<div id="main">
<div id="mainContainer">main content</div>
</div>
<div id="left">
<div id="leftContainer" class="inner">left content</div>
</div>
<div id="right">
<div id="rightContainer" class="inner">right</div>
</div>

从上面的Html代码中我们可以明显得看出，在main,left,right三个div内部我都增加了一个div，那么他们起了什么样的作用呢，大家从下在的CSS中可以明显的体会出来。

#main {
float: left;
width: 100%;
}
#mainContainer {
margin: 0 230px;
height: 200px;
background: green;
}
#left {
float: left;
margin-left: -100%;
width: 230px
}
		
#right {
float: left;
margin-left: -230px;
width: 230px;
}
		
#left .inner,
#right .inner {
background: orange;
margin: 0 10px;
height: 200px;
}

简单的说一下其实现原理，这种方法布局，主要运用的是负的margin值。首先在div#main中我定了一个100％宽度并进行左浮动，并且主内容是放在其内层div#mainContainer中，并在这个主内容层中需要进行一个margin-left和margin-right设置，并且这两个值是很有讲究的，并不是可以随便设置的，这两个值需要等于左右两列的宽度。我们此处是230px。左栏和右栏都使用负的margin值加上左浮动来布局，左栏是左浮动并加了一个“margin-left:-100%”,这是因为div#left前面有一个div#main，并且其宽度为100％，这样一来在左栏定这个margin-left: -100%;刚好使左边栏定位到页面的最左边；而右栏也进行左浮动，但其定义的“margin-left”也是负值，并且等于其自身的宽度230px；最后在div#left,div#right中加上一个div.inner是为了更好的控制边栏与主内容列之间的间距。比如说此例的10px。大家可以看看其效果是不是和第二种方法一样。

上面啰嗦完了常见的布局方法，接着进我们一起来看另外一种三列布局中间固定宽度，两边自适应宽度。对于我来说，这是一种很少碰到的布局方法，不知道大家有何体会，那么下面我们一起来看这种布局方法的实现过程，同样先来看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下也就安全了。

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

2012年09月26日更新——CSS3 Flexbox

前面介绍了三种方法，实现L1F2L3布局效果，也就是第一列和第三列自适应宽度，中间一列固定宽度。今天在给大家推荐一种CSS3实现这种布局的方法，采用CSS3的Flexbox，这种方法 不足之处就是只能在部分浏览器中使用，详细的请看下面代码：

HTML结构

<div class="grid">
  <div class="col fluid">
    ...
  </div>
  <div class="col fixed">
    ...
  </div>
  <div class="col fluid">
    ...
  </div>
</div>

CSS代码

.grid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
}
.col {
  padding: 30px;
}
.fluid {
  flex: 1;
}
.fixed {
  width: 400px;
}

效果如下面的demo所示：

如需转载烦请注明出处：W3CPLUS

返回顶部