CSS三栏布局两侧定宽中间自适应-position

1、代码结构

<div class="content">

<div class="left">

我是左边内容

...

</div>

<div class="center">

我是中间内容

...

</div>

<div class="right">

我是右边内容

...

</div>

</div>

 左中右的三个元素包括在content父级元素中

2、父级元素设置相对定位

.content{

width:80%;

margin:0 auto;

position: relative;

}

3、左右设置固定宽度，设置绝对定位

.left,.right{

width:300px;

height:300px;

position: absolute;

}

4、左侧设置在父级元素的左上位置

.left{

left:0;

top:0;

background:#FF9966;

}

5、右侧设置在父级元素的右上位置

.right{

right:0;

top:0;

background: #CCCC00;

}

6、中间设置margin值，将两侧的布局留出来

.center{

margin:0 300px;

background:#996600;

}

7、查看效果

改变窗口的大小，可以看到两侧为固定宽度，中间则自适应显示