双飞翼布局的理解

都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局

最终效果都是

image

圣杯布局

圣杯布局 container要float: left

是container预留padding左右, 然后main占100%宽度

左边的margin: -100%, position设为relative

为什么左边的是-100%, 因为-左边padding预留位置就会跑到上一行mian那一行

但是是在最右边, 那还是要跑去最左边才可以, 也就是再继续靠左, 加起来就是100%width

image

双飞翼布局

与圣杯布局不同的是, container只有包裹住中间的main

然后左右用margin来空出位置

中间的main要预留出左右位置, 不过用的是marin左右预留

左边的也是要margin-left: -100%

不同的是左边的不需要relative定位

image

---

参考: https://www.jianshu.com/p/81ef7e7094e8

推荐阅读更多精彩内容

• 圣杯布局和双飞翼布局的理解与思考

  圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度...

  阿尔卑斯的隆冬阅读 66,560评论 23赞 155
• 圣杯布局和双飞翼布局的理解

  圣杯和双飞翼布局都是左右两栏宽度固定，中间部分宽度自适应。 圣杯布局 参考：http://www.alistapa...

  饥人谷_NewClass阅读 719评论 0赞 2
• HTML+CSS(47-72)

  问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...

  _Yfling阅读 13,786评论 1赞 92
• 圣杯布局和双飞翼布局

  在前端布局中，事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应...

  风铭阅读 1,481评论 1赞 6
• 圣杯布局和双飞翼布局

  实现圣杯布局和双飞翼布局，“负边距”是必不可少的。 了解圣杯布局和双飞翼布局之前，我们先来了解下负边距。一、定义：...

  betterwlf阅读 780评论 0赞 11