双飞翼布局和圣杯布局将界面分为左中右三部分，其中左右侧固定宽度，中间实现自适应。
圣杯布局实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container
{
height: 300px;
padding:0 400px 0 200px;
}
.main
{
float: left;
width: 100%;
background-color: red;
height: 300px;
word-break: break-all;
}
.left
{
float: left;
background-color: yellow;
width: 200px;
margin-left: -100%;
height: 300px;
position: relative;
left:-200px;
word-break: break-all;
}
.right
{
float: left;
background-color: blue;
width: 400px;
margin-right: -400px;
height: 300px;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
解释：
1.main写在最前面（为了加载时先加载main部分，其实没啥用）,用负margin将left拉到main的左边，将right拉到它的右边，注意此时left和right是覆盖main部分的。(当margin为百分比时是相对父元素的宽度进行计算的，无论是margin-left、maring-right还是margin-top,margin-bottom)
2. main部分的宽度是100%，这说明它会占满一行，为了空出空间给left和right，需要对他们三外面的容器container进行设置：padding：0 400px 0 200px;
3. 接下来把空出来的部分分配给left和right，这里用到相对定位。.left{position:relative;left:-200px;}（left部分相对自身向左偏移200px）
双飞翼布局实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container
{
height: 300px;
}
.main
{
float: left;
width: 100%;
background-color: red;
height: 300px;
word-break: break-all;
}
.left
{
float: left;
background-color: yellow;
width: 200px;
margin-left: -100%;
height: 300px;
word-break: break-all;
}
.right
{
float: left;
background-color: blue;
width: 400px;
margin-left: -400px;
height: 300px;
word-break: break-all;
}
.main_n
{
margin:0 400px 0 200px;
}
</style>
</head>
<body>
<div class="test">
<div class="main"><div class="main_n">main</div></div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>解释：
双飞翼布局跟圣杯布局实现的目标相同，实现手法区别主要在于后面的main定位。
当left和right占领main身体时，圣杯布局通过外部容器padding来实现left和right与main分离，而双飞翼布局则直接在main内定义一个div，通过该div的margin为left和right让出空间。
看图得区别：
圣杯布局：
双飞翼布局：
扩展：
1. 使用calc表达也可实现，但实际开发中最好避免，因为css表达式会导致性能问题。
2. flex布局——容易实现，最多有点兼容性问题
flex: 0 0 200px; (既不放大也不缩小，宽度200)
flex: 1; (自动分配宽度)
3. 使用定位的方法position: absolute;相对父元素定位。
3585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
