三欄布局的n種實現(xiàn)

aisuhua 發(fā)布于2019-08-29 10:54 / 1029人閱讀

摘要：本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。每一種布局都會有個，個人依然認為文章里帖代碼并沒有來的直接。其中討論了這么多種種布局，有以下理由是每種布局也都有他的毛病，沒有十全十美的，每種布局也都有人在用。

本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。至于其他類型，基本上也就是半斤和八兩。每一種布局都會有個Demo，個人依然認為文章里帖代碼并沒有Demo來的直接。所以正文負責解釋，源碼參見Demo。其中討論了這么多種（6種）布局，有以下理由：1是每種布局也都有他的毛病，沒有十全十美的，每種布局也都有人在用。2是雖然有相對優(yōu)秀的方案，但是不優(yōu)秀的方案也有有用的東西在里邊，可能會啟發(fā)其他的思路補充遺漏的知識點。

1. 利用絕對定位特點：

左右兩欄采用絕對定位抽離文檔流，分別固定于頁面的左右兩側(cè)，中間欄用左右margin值撐開可以容納左右邊欄的距離。這個很簡單不多解釋。 Demo:absoluteLayout

2. 利用兩側(cè)浮動都不占據(jù)文檔流：

左欄左浮動，右欄右浮動，中間欄左右margin值等于左右欄寬度。html中，中間欄要放在左右邊欄的后邊。道理上和絕對定位差不多，就是不占文檔流了其他元素就填充上了，只要把兩邊留出空間不導致重合即可。 Demo：twoSidesFloatLayoutDemo

3. 利用浮動和margin負值的特點：

標簽順序為 middle 寬度 100%，sub 左右 margin 為左右欄留出空間,其中 sub 元素不要浮動，否則會包裹里面的內(nèi)容而不會撐滿空間，其他元素全部左浮動。left 的 margin-left 為－100%，right 的margin-left為sub的負的margin-right 。浮動的特點就是緊跟著前一個元素，放不下了就換行，本來middle元素占滿了第一行，sub元素的margin留出的空間并不會給其他的浮動元素，左欄被迫換行，處于第二行最左側(cè)，相當于緊跟著第一行后邊，100%的負margin－left會讓他從緊跟著第一行變成第一行最左邊，這時左欄和sub元素的margin－left留出的空間重合，達到目的，此時右欄在原來左欄的位置，再用類似的處理方式，達到最終效果。其中sub的margin可以換為padding，相同的原理和效果。此處如果不需要撐滿空間（有內(nèi)容撐滿sub）可以不要父元素（即middle）。Demo：floatLayoutDemo。說的有點亂其實就是這個樣子：

4. 利用inline-block特點：

父元素包含左中右欄：（子元素順序中，左，右）父元素設置padding為左右欄留出空間，然后中欄寬度100%占據(jù)除padding外的空間，左右欄利用margin－left等于自身寬的負值使其與中欄右邊界重合，再調(diào)節(jié)left，左欄left為－100%右欄left為右欄寬度。左中右欄全部為子元素，所以margin－left無法占據(jù)padding空間，需要左右邊欄相對定位后調(diào)解left值達到目標狀態(tài)。其中注意父元素設置font-size: 0; letter-spacing: -4px; 子元素再重置這兩個屬性。 Demo：inlineBlockLayoutDemo。說的有點亂，其實就是這個樣子：

5. 利用calc屬性和inline－block特點：

父元素設置（同樣是父元素包含左中右欄）：? ?text-align:center;?????font-size: 0;?????? letter-spacing: -4px; ?左中右欄再重置：? ?font-size: 16px;?????? letter-spacing: normal; 左右欄固定寬度， ?html中元素順序為：左，中，右?????，假設左右欄寬度和300px；中間攔： ?width:calc(100% - 300px); 百分比與固定寬度混合布局使用，支持ie9+，注意＋－＊／號兩邊留空格 Demo：useCalcLayoutDemo

6. 利用flex布局：

flex布局我認為是最先進而方便的布局，非常靈活不過內(nèi)容也不少，只可惜兼容ie10+。不在這多廢話，推薦阮一峰老師的教程：flex教程。父元素display:flex; ，左右兩欄設置flex-basis 預置寬度，中間欄flex-grow: 1;自動伸展。完活。 Demo：flexLayoutDemo