首先圣杯布局和双飞翼布局的差异体现在 都是想给左右浮动空出位置。
那么就只有两条路可以走：
1:用padding的方法 padding:0 100px;
2.用margin的方法 margin:0 100px;
用第一种方法走到底就是 圣杯布局，用第二种方法走到底就是 双飞翼布局。，
第一种方法 代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> .header,.footer{ height:100px; 100%; background:red; clear:both; } .content{ padding:0 200px; overflow: auto; } .main{ 100%; float:left; height:100px; background:yellow; } .left{ 200px; height:100px; background:pink; float:left; margin-left:-100%; position: relative; left:-200px; } .right{ 200px; height:100px; background:green; float:left; margin-left:-200px; position: relative; left:200px; } </style> </head> <body> <div> <div class="header"> 头部 </div> <div class="content"> <div class="main">中间部分。</div> <div class="left">左侧边栏</div> <div class="right">右侧边栏</div> </div> <div class="footer"> 页脚 </div> </div> </body> </html>
效果图：
圣杯布局要注意的是：main中间部分需要放在第一个加载。另外中间部分宽度为100%撑满正行，左右侧边栏利用负margin上来。最后用position：relative将左右两侧边栏移到两边。
双飞翼布局
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.header,.footer{
height:100px;
100%;
background:red;
clear:both;
}
.main_link{
100%;
height:100px;
background:yellow;
float:left;
}
.main{
margin:0 200px;
}
.left{
200px;
height:100px;
background:pink;
float:left;
margin-left:-100%;
}
.right{
200px;
height:100px;
background:green;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="content">
<div class="main_link">
<div class="main">中间部分</div>
</div>
<div class="left">左侧边栏</div>
<div class="right">右侧边栏</div>
</div>
<div class="footer">页脚</div>
</body>
</html>
双飞翼的布局感觉思路就是。如果左右两侧边栏要和我main抢位置?那我为什么不直接空出来位置好了。不和你们抢了。
就给main加个div。让这个div宽度取100% 和left和right浮动起来，然后main取一个margin：0 200px;把左右侧边栏的的位置给空出来 不就行了么？
然后用负margin 让left和right移动上去。