都是為了實現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應(yīng)的三欄布局
最終效果都是
image
圣杯布局
圣杯布局 container要float: left
是container預(yù)留padding左右, 然后main占100%寬度
左邊的margin: -100%, position設(shè)為relative
為什么左邊的是-100%, 因為-左邊padding預(yù)留位置就會跑到上一行mian那一行
但是是在最右邊, 那還是要跑去最左邊才可以, 也就是再繼續(xù)靠左, 加起來就是100%width
image
雙飛翼布局
與圣杯布局不同的是, container只有包裹住中間的main
然后左右用margin來空出位置
中間的main要預(yù)留出左右位置, 不過用的是marin左右預(yù)留
左邊的也是要margin-left: -100%
不同的是左邊的不需要relative定位
image
