圣杯布局和双飞翼布局的理解和区别

    圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在中间栏的上面,中间栏还是100%宽度,只不过中间栏的内容通过margin的值显示在中间。

    效果简图如下:

   

1、圣杯布局

    注意middle写在前面就行了,dom结构如下:

DOM:
<body>
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div>
<
div id="footer">footer</div> </body>

相对应的CSS内容如下:

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了,此段代码是为了摆正中间栏的位置*/
padding
:0 200px 0 180px; height:100px; } #middle{ float:left; width:100%;/*左栏上去到第一行*/
height:100px; background:blue; } #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; /*中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置*/
position
:relative; left:-180px; } #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9;     /*中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置*/
position
:relative; right:-200px; } #footer{
height:50px;
    background: #666;
    text-align: center;

}
</style>

2、双飞翼布局

    DOM代码如下:

<body>
<div id="hd">header</div> 
<div id="middle">
<div id="inside">middle</div>
</div> <div id="left">left</div> <div id="right">right</div> <div id="footer">footer</div> </body>

    双飞翼布局是在middle的div里又插入一个div,通过调整内部div的margin值,实现中间栏自适应,内容写到内部div中。

    CSS代码如下:

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
height:100px; background:blue; } #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; } #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9; }
/*给内部div添加margin,把内容放到中间栏,其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*记得清楚浮动*/
height:50px;
background: #666;
text-align: center;
}
</style>

 

posted @ 2015-10-16 17:30 _默默 阅读(...) 评论(...) 编辑 收藏