圣杯布局和双飞翼布局解决的问题是一样的,就是两边固定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:见代码后的解析
双飞翼布局还有个好处,让Main变成BFC元素了,屏幕宽度缩小Main也不会被挤下去,圣杯布局就会被挤下去。
代码
圣杯布局:
<div class="header">Header</div>
<div class="bd">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right
</div>
</div>
<div class="footer">Footer</div>
<style>
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666; height:30px; clear:both;}
.bd{
/*关键2 为了不被左右挡住 但是加了之后左右栏也缩进来了*/
padding-left:150px;
padding-right:190px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-100%; /*关键1 挪上去 */
position: relative;
left:-150px;
/*关键3 各自相对于自己把自己挪出去,得到最终结果*/
}
.main{
background: #D6D6D6;
/*中间部分需要根据浏览器宽度的变化而变化,所以要用100%*/
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-left:-190px;/*关键1 挪上去*/
position:relative;
right:-190px;
/*关键3 各自相对于自己把自己挪出去,得到最终结果 */
}
</style>
解析:
1. left 和 right 分别设置 margin-left:-100%和 margin-left:-190px使左右挪上去;
2. 为了不被left 和 right 挡住 ,给.bd加上padding-left:150px;padding-right:190px;
3. 但是左右栏也缩进来了,于是采用相对定位方法,各自相对于自己把自己挪出去
双飞翼布局:
<div class="header">Header</div>
<div class="bd">
<div class="main">
/*关键1 加了一层div*/
<div class="inner">
Main
</div>
</div>
<div class="left">Left</div>
<div class="right">Right
</div>
</div>
<div class="footer">Footer</div>
<style>
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666;height:30px;clear:both;}
.bd{
/*关键2 去掉*/
/*padding-left:150px;*/
/*padding-right:190px;*/
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-100%;
/*关键2 去掉*/
/*position: relative;*/
/*left:-150px;*/
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-left:-190px;
/*关键2 去掉*/
/*position:relative;*/
/*right:-190px;*/
}
.inner{
/*关键3*/
margin-left:150px;
margin-right:190px;
}
</style>
解析:
1.main内层增加了一个div
2.去掉了左右栏的相对定位,去掉包裹层padding
3.以中间栏新增div的margin代替