所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。
他俩的区别就是：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。
圣杯布局
基本HTML结构
<div class="content">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>CSS代码
* {
box-sizing: border-box;
}
.content {
overflow: hidden;
padding-left: 100px;
padding-right: 100px;
}
.content > div {
float: left;
position: relative;
}
.main {
width: 100%;
height:100px;
border:1px solid red;
}
.left {
width:100px;
margin-left: -100px;
right:100%;
height:100px;
border:1px solid #000;
}
.right {
width:100px;
margin-right: -100px;
height:100px;
border:1px solid #000;
}- main、left、right全部左浮动，在设置一个
position：relative稍后会用到。 - main的宽度设置为100%。left和right固定宽度（假设100px）。
- 此时main自己沾满了一行，所以给left拽上来设置
marginleft：100%，此时left虽然上来了但是是覆盖在main上面的。 - 给content设置
padding-left等于left的宽，此时左边有100px的空白，main和left都被挤过来了，要想还原，将left向左在移动100px就行了。 - 此时就剩下right在下面，同理
margin-right：-100%就上去了。
双飞翼布局
基本HTML结构
<div class="content">
<div class="main">
<div class="main-inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
* {
box-sizing:border-box;
}
.main-inner {
margin-left:100px;
margin-right:100px;
}
.content {
overflow:hidden;
/* padding-left:100px;
padding-right:100px;
*/
}
.content > div {
float:left;
/* position:relative;
*/
}
.main {
width:100%;
height:100px;
border:1px solid red;
}
.left {
width:100px;
margin-left:-100%;
/* right:100px;
*/
height:100px;
border:1px solid #000;
}
.right {
width:100px;
/* margin-right:-100px;
*/
margin-left:-100px;
height:100px;
border:1px solid #000;
}
对比一下css的区别：多了一个.main-inner，少了一些相对定位。
扩展
使用flex实现圣杯布局
基本HTML结构与圣杯布局一致，这里就不追代码了。CSS代码如下
* {
box-sizing: border-box;
}
.content {
overflow: hidden;
display:flex;
flex:1
}
.main {
flex:1;
height:100px;
border:1px solid red;
}
.left {
flex:0 0 100px;
order:-1;
height:100px;
border:1px solid #000;
}
.right {
flex:0 0 100px;
height:100px;
border:1px solid #000;
}
微信扫一扫 
支付宝扫一扫 
