所谓三列自适应布局指的是两边定宽，中间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 {width: 100px;height: 200px;background-color: red;position: absolute;top:120px;left: 0;}#right {width: 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 {width: 100px;height: 200px;background-color: red;float: left;}#right {width: 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 {width: 100%;height: 100%;display: flex;margin: 10px;}#left {width: 100px;height: 200px;background-color: red;margin: 10px;}#right {width: 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一定要放到中间。
