所謂三列自適應布局指的是兩邊定寬，中間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一定要放到中間。