双飞翼布局和圣杯布局两者实现效果相同，都是为了实现一个两侧宽度固定而中间自适应的三栏布局
如图：
要实现一个三列布局的具体要求为：
- 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=)