在我看来，圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。那么它们又有哪些区别呢？
双飞翼布局
顾名思义，双飞翼布局就仿佛是一只鸟，main就相当于鸟的身体，而aside和ad则是翅膀，先决定main放在哪里，再把aside和ad放在合适的位置。
- 在html结构中，main要放在最前面，因为浏览器是从上至下加载页面的
- main,aside,ad都要float:left;
- main要width:100%;aside要margin-left: -100%;那么ad则margin-left: -150px;
- 给main > inner使用：margin-left: 200px;margin-right: 150px;即可
html结构如下：
<div class="main">
<div class="inner"> main </div>
</div>
<div class="aside"> aside </div>
<div class="ad"> ad </div>
css设置如下：
.main{
width: 100%;
float: left;
}
.main > .inner{
margin-left: 200px;
margin-right: 150px;
background: deeppink;
}
.aside{
width: 200px;
float: left;
margin-left: -100%;
background: pink;
}
.ad{
width: 150px;
float: left;
margin-left: -150px;
background: pink;
}
圣杯布局
- 在html结构中，main要放在最前面
- main,aside,ad都要float:left;position: relative;
- main要width:100%;
- aside要margin-left: -100%;再设置right: 200px;
- 设置wrap的padding-left: 200px;padding-right: 150px;
- ad直接：margin-right: -150px;即可。
html结构如下：
<div class="wrap">
<div class="main"> main </div>
<div class="aside"> aside </div>
<div class="ad"> ad </div>
</div>
css设置如下：
.wrap{
padding-left: 200px;
padding-right: 150px;
}
.main{
position: relative;
width: 100%;
float: left;
background: deeppink;
}
.aside{
position: relative;
width: 200px;
float: left;
margin-left: -100%;
background: pink;
right: 200px;
}
.ad{
position: relative;
width: 150px;
float: left;
margin-right: -150px;
background: pink;
}