雙飛翼布局是在圣杯布局的基礎上進行的優化。好處是：去掉了圣杯布局中的定位，只使用浮動和負的margin-left就實現了相同效果，缺點是所有的頁面元素都要進行浮動的設置。
將middle區域抽離出來，使用一個父容器包裹，父容器寬度100%，middle設置margin-left:200px;
margin-right:-220px;留出空白區域。類似圣杯的父容器padding。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雙飛翼布局</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #ccc;
text-align:center;
}
header{
height:50px;
background-color:pink;
line-height:50px;
float: left;
width: 100%;
}
.container,.left,.right{
float: left;
min-height: 300px;
}
.container{
width:100%;
}
.middle{
margin:0 220px 0 200px;
background-color: red;
min-height: 300px;
}
.left{
width:200px;
background-color: yellow;
margin-left:-100%;
}
.right{
width:220px;
background-color: blue;
margin-left:-220px;
}
</style>
</head>
<body>
<header>
<h2>我是header</h2>
</header>
<div class="container">
<div class="middle">
<h4>我是middle</h4>
<p>我是內容部分我是內容部分是內容部分我是部分我是內容部分我是內容部分我</p>
</div>
</div>
<div class="left">
<h4>我是left</h4>
<p>我是left的內容</p>
</div>
<div class="right">
<h4>我是right的內容</h4>
<p>我是right的內容</p>
</div>
</body>
</html>
image.png
