三列布局

介紹幾種左中右佈局,左右定寬,中間自適應,擴展閱讀可搜索關鍵字:聖盃佈局,雙飛翼佈局css

注:建議全部佈局都要有個包裹container並設置min-width(或width)等於設計稿所給尺寸,防止瀏覽器尺寸變化形成樣式混亂。另,簡易佈局爲筆者根據經驗所寫,若有不妥的地方歡迎指導修改。

效果圖:

對比:

 
優勢
缺點
備註
聖盃

1.有效利用外層包裹結構html

2.中間部分優先渲染瀏覽器

1.代碼量最多佈局

2.因外包裹涉及到padding,因此要注意box-sizing:border-box時對總體寬度形成的印象設計

雖代碼量較多,可是較雙飛翼結構簡單。在實際開發當中考慮到子元素的絕對定位問題,一般會給外包裹添加position:relative。所以,這多餘出的代碼量也就不算什麼了。htm

雙飛翼

1.不依賴外層包裹blog

2.中間部分優先渲染開發

main須要再嵌套一層 左右結構比較清晰,較容易理解。可是因爲中間多了一層子元素,使得結構複雜了一層。可視狀況而定。
簡易

不依賴外層包裹it

中間部分最後渲染 由於不須要優先渲染中間部分,因此限制就少,所以也是三者中代碼量最少的。如無特別須要,平時開發利用此佈局便可。

代碼:

聖盃

html:

<div class="grail-container">
    <div class="grail-main"></div>
    <div class="grail-left"></div>
    <div class="grail-right"></div>
</div>io

css:

.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; }

 

雙飛翼

html:

<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>

css:

.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; }

簡易佈局

html:

<div class="diy-container">
    <div class="diy-left"></div>
    <div class="diy-right"></div>
    <div class="diy-main"></div>
</div>

css:

.diy-container{}.diy-left{float: left; width: 230px;}.diy-main{margin: 0 220px 0 230px;}.diy-right{float: right; width: 220px;}

相關文章
相關標籤/搜索