資訊專欄INFORMATION COLUMN
摘要：前提本文討論的是兩列自適應布局左列定寬不定寬，右列自適應。左列不定寬，右列自適應形成的間隔通過設置來觸發特性這個方法主要是應用到的一個特性浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣該兄弟元素就會被浮動元素覆蓋。
前提
本文討論的是兩列自適應布局：左列定寬/不定寬，右列自適應。
雖然分這兩種情況，但實際上不定寬的方案同樣適用于定寬的場景，因此不定寬的方案泛用度更高。
左列定寬，右列自適應 margin + floatleft
right
right
.left{
float: left; //向左浮動
width: 100px; //固定寬度
position: relative;//由于.left與.right-fix重合，且.right-fix在DOM樹上的位置比.left要后，因此.right-fix會遮擋住.left，設置.left為relative可以讓其冒出來。
}
.right-fix{
float: right; //向右浮動
width: 100%; //為了自適應設為100%
margin-left: -100px;//由于寬度設為100%，.right-fix遭到瀏覽器換行處理；因此通過設置負的margin值，在左側制造出100px的空白，使.right-fix與.left重合（即處于同一行）
}
.right{
margin-left: 120px; //由于.left和.right-fix重合了，因此給.right設置一個margin-left，避免內容區（.right）與.left重合。另外，120px - 100px = 多出來的20px實際上就相當于.left和.right之間的間隔了。
}
這個方法其實已經是兼顧到低版本IE的完善版本了，缺點是代碼冗長，而且有兩個關鍵知識點比較難理解：
給.left加上position:relative;怎么就能讓.left冒出來而不受.right-fix的遮擋了呢？
.right-fix設置負的margin-left，怎么就能使.left與.right-fix重合了呢？
再者，這個方案由于.right-fix的margin-left和.left的width高度耦合，因此無法實現自適應，只能應用在左列（當然右列也成）固定寬度的場景。
absoluteleft
right
right
.parent{
position: relative;
}
.left{
position: absolute;
left: 0;
width: 100px;
}
.right{
position: absolute;
left: 120px; //比.left的left多出20px，相當于間隔
right: 0;
}
這種方法是通過absolute配合left/right進行布局：
設置display: absolute后，通過top/right/bottom/left可以實現對元素的位置進行像素級的任意控制。因此，使用left屬性即可控制各元素的起始位置，避免重疊。
自適應的關鍵在于left和right屬性，在對元素同時設置這兩個屬性后，元素的寬度便會遭到拉伸，實現自適應。
需要注意的是父級元素需要設置display: relative。
這種方案很容易理解，但缺點就是不能做到“不定寬”，因為.left和.right的left屬性的值高度相關。
左列不定寬，右列自適應 float + BFCleft
right
right
.left{
float: left;
width: 100px;
margin-right: 20px; //形成20px的間隔
}
.right{
overflow: hidden; //通過設置overflow: hidden來觸發BFC特性
}
這個方法主要是應用到BFC的一個特性：
浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣該兄弟元素就會被浮動元素覆蓋。
若浮動元素的塊狀兄弟元素為BFC，則不會占滿一整行，而是根據浮動元素的寬度，占據該行剩下的寬度，避免與浮動元素重疊。
浮動元素與其塊狀BFC兄弟元素之間的margin可以生效，這將繼續減少兄弟元素的寬度。
并不是一定要在.right上用overflow: hidden;，只要能觸發BFC就好了，另外在IE6上也可以觸發haslayout特性（推薦用*zoom: 1;）。
由于.right的寬度是自動計算的，不需要設置任何與.left寬度相關的css，因此.left的寬度可以不固定（由內容盒子決定）。
left
right
right
.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{
width: 100px;
padding-right: 20px;
}
這個方法是表格布局的典型運用。說真的，我也很迷惘要不要使用表格布局，畢竟已經是上個時代的產物了，雖然已經不再用 left right right flex布局的自適應我就不多說了，本來就是設計來自適應的，只需要用上flex: 1;，就能讓.right分到.parent的寬度減去.left的寬度。 我個人是比較推薦用float + BFC方案，瀏覽器兼容性很好，代碼量也少，另外也很好理解；移動端上也可以考慮用上flex方案，不過還是那一句，注意用舊版的flex，兼容性會好一點。 說是說“兩列自適應布局”，實際上，只要滿足“只有一列是自適應”這一條件，多少列布局都行。 《The Definitive Guide to Using Negative Margins》 《前端精選文摘：BFC 神奇背后的原理》 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。 轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115041.html 摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。
在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。
目錄
一、定寬+... 摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。
在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。
目錄
一、定寬+... 摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。
在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。
目錄
一、定寬+... 閱讀 1531·2021-09-22 15:35 閱讀 2011·2021-09-14 18:04 閱讀 883·2019-08-30 15:55 閱讀 2454·2019-08-30 15:53 閱讀 2685·2019-08-30 12:45 閱讀 1205·2019-08-29 17:01 閱讀 2583·2019-08-29 15:30 閱讀 3520·2019-08-29 15:09的HTML結構了，但用上相應的CSS其實思路跟以前是變化不大的。
這個方法主要是利用了表格(table)的寬度必然等于其所有單元格(table-cell)加起來的總寬度，那么只要表格的寬度一定，其中一個（或幾個）單元格的寬度也一定，那么另外一個未設置寬度的單元格則會默認占滿剩下的寬度，即實現自適應。
flex
.parent{
display: flex;
}
.left{
margin-right: 20px;
}
.right{
flex: 1;
}
.left p{width: 200px;}
相關文章
前端面試重點之——多列布局
前端面試重點之——多列布局
前端面試重點之——多列布局
發表評論
0條評論
starsfun
男|高級講師
TA的文章
閱讀更多
基于主機名的虛擬主機服務怎么實現-虛擬主機怎么登陸圖解？
LAMP Web一鍵安裝腳本 – Linux服務器安裝Apache/MySQL/PHP網站環境
字蛛font-spider報錯,<web font not found>,碰到的最新問題
布局總結-水平居中布局的實現
兩列自適應布局方案整理
JavaScript的數據類型及其檢測
前端面試題1（HTML篇）
偽類和偽元素的區別
最新活動
閱讀需要支付1元查看
