介紹幾種左中右佈局,左右定寬,中間自適應,擴展閱讀可搜索關鍵字:聖盃佈局,雙飛翼佈局css
|
優勢
|
缺點
|
備註
|
---|---|---|---|
聖盃 | 1.有效利用外層包裹結構html 2.中間部分優先渲染瀏覽器 |
1.代碼量最多佈局 2.因外包裹涉及到padding,因此要注意box-sizing:border-box時對總體寬度形成的印象設計 |
雖代碼量較多,可是較雙飛翼結構簡單。在實際開發當中考慮到子元素的絕對定位問題,一般會給外包裹添加position:relative。所以,這多餘出的代碼量也就不算什麼了。htm |
雙飛翼 | 1.不依賴外層包裹blog 2.中間部分優先渲染開發 |
main須要再嵌套一層 | 左右結構比較清晰,較容易理解。可是因爲中間多了一層子元素,使得結構複雜了一層。可視狀況而定。 |
簡易 | 不依賴外層包裹it |
中間部分最後渲染 | 由於不須要優先渲染中間部分,因此限制就少,所以也是三者中代碼量最少的。如無特別須要,平時開發利用此佈局便可。 |
<div class="grail-container">
<div class="grail-main"></div>
<div class="grail-left"></div>
<div class="grail-right"></div>
</div>io
.grail-container { padding: 0 220px 0 230px; }
.grail-main { float: left; width: 100%; }
.grail-left { float: left; position: relative; width: 230px; margin-left: -100%; left: -230px; }
.grail-right { float: left; position: relative; width: 220px; margin-left: -220px; right: -220px; }
<div class="wing-container">
<div class="wing-main">
<div class="wing-submain"></div>
</div>
<div class="wing-left"></div>
<div class="wing-right"></div>
</div>
.wing-container {}
.wing-main { float: left; width: 100%; }
.wing-submain { margin: 0 220px 0 230px; }
.wing-left { float: left; width: 230px; margin-left: -100%; }
.wing-right { float: left; width: 220px; margin-left: -220px; }
<div class="diy-container">
<div class="diy-left"></div>
<div class="diy-right"></div>
<div class="diy-main"></div>
</div>
.diy-container{}.diy-left{float: left; width: 230px;}.diy-main{margin: 0 220px 0 230px;}.diy-right{float: right; width: 220px;}