圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。
圣杯布局
//HTML代码段
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
//css代码段
.container {
padding-left: 200px;
padding-right: 150px;
overflow: auto;
}
.center {
float: left;
width: 100%;
background-color: lightcoral;
}
.left {
width: 200px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
background-color: lightcyan;
}
.right {
float: left;
width: 150px;
margin-left: -150px;
position: relative;
right: -150px;
background-color: lightgoldenrodyellow;
}
双飞翼布局
//HTML代码段
<div class="container">
<div class="center">
<div class="center-wrap">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
/css代码段
.center{
float:left;
overflow:auto;
width:100%;
background-color:lightcoral;
}
.center-wrap{
margin:0 150px 0 200px;
}
.left{
float:left;
width:200px
margint-left:-100%;
background-color:lightcyan;
}
.right{
width:150px;
float:left;
margint-left:-150px;
background-color:lightgoldenrodyellow;
}