所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。
1. 基于传统的position和margin等属性进行布局
这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。
1).绝对定位法
绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#left {
100px;
height: 200px;
background-color: red;
position: absolute;
top:120px;
left: 0;
}
#right {
100px;
height: 200px;
background-color: green;
position: absolute;
top:120px;
right: 0;
}
#middle {
height: 200px;
margin: 2px 200px;
background-color: saddlebrown;
}
</style>
</head>
<body>
<div id="content">
<div id="left">左侧</div>
<div id="middle">中间</div>
<div id="right">右侧</div>
</div>
</body>
</html>
2).使用自身浮动法
自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#left {
100px;
height: 200px;
background-color: red;
float: left;
}
#right {
100px;
height: 200px;
background-color: green;
float: right;
}
#middle {
height: 200px;
margin: 2px 200px;
background-color: saddlebrown;
}
</style>
</head>
<body>
<div id="content">
<div id="left">左侧</div>
<div id="right">右侧</div>
<div id="middle">中间</div>
</div>
</body>
</html>
该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。
2 ， css3新特性
在外围包裹一层div，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
100%;
height: 100%;
display: flex;
margin: 10px;
}
#left {
100px;
height: 200px;
background-color: red;
margin: 10px;
}
#right {
100px;
height: 200px;
background-color: green;
margin: 10px;
}
#middle {
flex: 1;
height: 200px;
margin: 10px;
background-color: saddlebrown;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>
注意： center一定要放到中间。