双飞翼布局的理解

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

最终效果都是

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