圣杯布局和双飞翼布局差别

主要在于解决中间内容没有自动换行问题
1、圣杯的解决方式:在bd设置左右padding,然后sub和extra设置relative,按照自身宽度相对偏移

<div id="bd">         
    <div class="main"></div>     
    <div class="sub"></div>        
    <div class="extra"></div>  
</div>

2、双飞翼布局:
main的宽度设置为100%,main-content设置左右margin,为sub和extra留出空间

<div id="main" class="column">
    <div id="main-content">#main</div>
</div>
<div class="sub"></div>    
<div class="extra"></div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 圣杯布局 在html中,先把中间的主区块middle放在容器的最前面,接着是left,最后是right。这样可以先...
    Maggie_77阅读 445评论 0 0
  • 圣杯和双飞翼布局都是左右两栏宽度固定,中间部分宽度自适应。 圣杯布局 参考:http://www.alistapa...
    饥人谷_NewClass阅读 731评论 0 2
  • 在前端布局中,事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应...
    风铭阅读 1,512评论 1 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,854评论 1 92
  • (原文链接有点问题,慎点)仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用:浮动 float负边距 ne...
    lulu_c阅读 819评论 0 0