問題：假設容器的高度默認100px，其中左欄、右欄的寬度各為300px，中間的寬度自適應的三欄布局如何寫？

左右固定，中間自適應

中間欄放在文檔流前面，保證優先加載。

方法1：浮動

方法2：絕對定位。

方法3：flexbox。移動開發里經常用到。

方法4：表格布局 table。已經淘汰

方法5：網格布局 grid

方法6：雙飛翼布局

方法7：圣杯布局

HTML代碼：

//注意元素次序

CSS 代碼：

//CSS reset body,html { height:100%; padding: 0; margin: 0 } //左欄左浮動 .left { float: left; width: 300px; height: 100px; background: red; } //中間自適應 .main { background: blue; height: 100px; margin:0px 200px 0px 100px; } //右欄右浮動 .right { background: red; width: 300px; float: right; height: 100px; }

這種方式代碼足夠簡潔與高效，也容易理解

HTML 代碼

CSS 代碼

.layout.absolute .left-center-right { position: relative; } .layout.absolute .left { position: absolute; left: 0; width: 300px; background: red; } /* 【重要】中間的區域，左側定位300px，右側定位為300px，即可完成。寬度會自使用 */ .layout.absolute .center { position: absolute; left: 300px; right: 300px; background: green; } .layout.absolute .right { position: absolute; right: 0; width: 300px; background: blue; }

該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。

將中間盒子放置html最開始，保證優先加載

使用flex order屬性決定三個盒子順序，左，中，右

左盒子和右盒子固定寬度，中間盒子flex:1

HTML 代碼：

CSS 代碼：

HTML 代碼：

CSS 代碼：

HTML 代碼

CSS 代碼：

.container { min-width: 600px;//確保中間內容可以顯示出來，兩倍left寬+right寬 } .left { float: left; width: 300px; height: 100px; background: red; margin-left: -100%; } .center { float: left; width: 100%; height: 100px; background: yellow; } .center .inner { margin: 0 300px; //新增部分 } .right { float: left; width: 300px; height: 100px; background: blue; margin-left: -200px; }

HTML 代碼

CSS 代碼：

.container { padding-left: 300px;//為左右欄騰出空間 padding-right: 300px; } .left { float: left; width: 300px; height: 100px; background: red; margin-left: -100%; position: relative; left: -300px; } .center { float: left; width: 100%; height: 100px; background: yellow; } .right { float: left; width: 300px; height: 100px; background: blue; margin-left: -300px; position: relative; right: -300px; }

相關解釋如下：

(1)中間部分需要根據瀏覽器寬度的變化而變化，所以要用100%，這里設左中右向左浮動，因為中間100%，左層和右層根本沒有位置上去

(2)把左層margin負300后，發現left上去了，因為負到出窗口沒位置了，只能往上挪

(3)按第二步這個方法，可以得出它只要挪動窗口寬度那么寬就能到最左邊了，利用負邊距，把左右欄定位

(4)但由于左右欄遮擋住了中間部分，于是采用相對定位方法，各自相對于自己把自己挪出去，得到最終結果

圣杯布局是利用父容器的左、右內邊距+兩個從列相對定位； 雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行布局調整

HTML web前端 容器

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。