實現三欄佈局有6種方法：
1.絕對定位法
2.聖盃佈局
3.雙飛翼佈局
4.自身浮動法
5.flex佈局
6.table佈局
這裏的絕對定位分兩種：一種是左右中三部分都進行絕對定位，中間部分通過left和right來進行定位。另一種是左右部分進行絕對定位，中間寬度自適應。但這兩種方法的html結構是不一樣的。
中左右：絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-絕對定位法(一)</title>
<style>
.middle,.left,.right{
position: absolute;
}
.left{
left:0px;
width:200px;
background-color: red;
}
.middle{
left:200px;
right:300px;
background-color: orange;
}
.right{
right:0px;
width:300px;
background-color: blue
}
</style>
</head>
<body>
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
左右中：左右絕對定位，中間使用margin-left/right來定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-絕對定位法(二)</title>
<style>
.left,.right{
position: absolute;
}
.left{
left:0px;
width:200px;
background-color: red;
}
.middle{
margin-left: 200px;
margin-right: 300px;
background-color: orange;
}
.right{
right:0px;
width:300px;
background-color: blue
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</body>
</html>