圣杯布局和双飞翼布局

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

    效果简图如下:

    技术分享

1、圣杯布局

    注意middle写在前面就行了,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>

 

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

标签:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值