雙飛翼布局和聖杯布局兩者實作效果相同，都是為了實作一個兩側寬度固定而中間自适應的三欄布局
如圖：
要實作一個三列布局的具體要求為：
- header和footer各自占領螢幕所有寬度，高度固定。
- 中間的container是一個三欄布局。
- 三欄布局兩側寬度固定不變，中間部分自動填充整個區域。
- 中間部分的高度是三欄中最高的區域的高度。
主要實作思路為：
- Lleft、center、right三種都設定左浮動
- 設定center寬度為100%
- 設定負邊距，left設定負邊距為100%，right設定負邊距為自身寬度
- 設定content的margin值為左右兩個側欄留出空間，margin值大小為left和right寬度
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header,
#footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
overflow: hidden;
}
.column {
text-align: center;
height: 300px;
line-height: 300px;
}
#left, #right, #center {
float: left;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
margin: 0 150px 0 200px;
}
</style>
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">
<div class="content">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
還有經典方式就是使用flex布局！！（阮一峰教程！！）
- 需在外部用一個div（class=‘contan’）放置所有内容，display設為flex，并且可換行flex-wrap:wrap；
- 頭部、尾部寬度為100%，将中間部分（bd）擠到中間；
- 中間（bd）寬度也為100%，display設為flex，使其中内容為三欄布局（left、right寬度固定，中間middle自适應（flex:1））；
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.contain {
display: flex;
flex-wrap: wrap;
height: 300px;
}
.hd {
background-color: #666;
width: 100%;
height: 15%;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
background-color: #666;
width: 100%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.bd {
display: flex;
width: 100%;
height: 75%;
}
.mi {
background-color: red;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.le {
background-color: green;
width: 200px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.ri {
background-color: yellow;
width: 100px;
display: flex;
justify-content: flex-end;
align-items: center;
}
</style>
<body>
<div class="contain">
<div class="hd">header</div>
<div class="bd">
<div class="le">left</div>
<!--需按順序排列，middle不在最前面-->
<div class="mi">middle</div>
<div class="ri">right</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
![現國内基金定投最好的入門書《指數基金投資指南》[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)