CSS三列布局之左右宽度固定，中间元素自适应问题
最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。
首先我想到的是float——浮动布局
使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >左侧的内容 固定宽度</div>
<div >右侧的内容 固定宽度</div>
<div >中间内容，自适应宽度</div>
</body>
</html>其次我想到了position——定位
使用定位方式，不需要先渲染中间元素，只要把左右两个元素分别使用定位，left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left{
width:200px;
height:500px;
position: absolute;
top:0;
left:0;
background:blue;
}
.center{
margin-left: 200px;
margin-right: 300px;
height:500px;
background-color: green;
}
.right{
width:300px;
height:500px;
position: absolute;;
top:0;
right:0;
background: blue;
}
</style>
</head>
<body>
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</body>
</html>第三、使用双飞翼布局
使用双飞翼布局与其他方式不同，它最先渲染的是中间元素，然后才渲染两边元素（注意，这一点与float布局方式正好相反哟），先将三个元素都设置为向左浮动，然后使用负边距将左右两个元素覆盖到中间元素的左右两边，形成羽翼。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.middle{
float: left;
width: 100%;
height: 50px;
background-color: #fff9ca;
}
.middle-wrap{
margin: 0 200px 0 150px;
}
.left{
float: left;
width: 150px;
height: 50px;
background-color: red;
margin-left: -100%; /*负边距的作用就是让左边div盖在中间div上面*/
}
.right{
float: left;
width: 200px;
height: 50px;
background-color: yellow;
margin-left: -200px; /*让右边的div覆盖在中间的div右边*/
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-wrap">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>双飞翼布局的最大优点是它的兼容性——可以兼容到IE6.
最后我还想说说CSS3的flex布局方法
该方式的思想是设置一个弹性容器包裹三个元素，并将这个容器设置为水平排列（flex-flow:row）,左右两边元素设置固定宽度，中间元素设置为flex:1;
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.flex {
display: flex;
flex-flow: row;
}
.left{
width: 200px;
height: 50px;
background-color: red;
}
.center{
flex: 1;
height: 50px;
background-color: #fff9ca;
}
.right {
width: 300px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="flex">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
</body>
</html>但不得不说的是flex布局的兼容性还不够完善，所以个人不推荐使用这种方式布局。
嘿嘿，以上就是我能想到的实现左右固定，中间自适应的三列布局的几种方式啦啦啦