聖杯和雙飛翼布局
阿新 • • 發佈：2018-02-04
ati 兩個 div pad 遮擋 -h 布局 問題 position 聖杯布局：
原理：給包裹層設置左右padding值空出left和right的位置，使用負邊距，左邊margin-left：-100%，右邊margin-left：-100px；此時左右兩個盒子位於主盒子兩側但是會遮擋住主盒子的內容，所以再給左盒子position：relative，left：-100px，右盒子position：relative；right：-100px，使左右兩個盒子定位正確。
/*html部分*/
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
<div>
/*css部分*/
.container{padding：0 100px 0 100px;}
.main{ float: left;width:100%;}
.left{float:left;width:100px;margin-left:-100%;position:relative;left:-100px}
.right{float:left;width:100px;margin-left:-100px;position:relative;right:-100px}
雙飛翼布局：
原理和聖杯布局有點像都是使用margin負邊距達到目的，不同的是雙飛翼布局將主盒子外包裝一層div，使用主盒子的左右外邊距解決主盒子被遮擋的問題。
/*html部分*/
<div class="container">
<div class="main-wrap">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
/*css部分*/
.main-wrap{width:100%;float:left}
.main{margin:0 100px 0 100px;}
.left{float:left;margin-left:-100%;width:100px;}
.right{float:left;margin-left:-100px;width:100px;}
聖杯和雙飛翼布局