在頁(yè)面開(kāi)發(fā)中爷抓，當(dāng)我們拿到設(shè)計(jì)師給出的UI圖后盆赤，首先考慮的就是布局問(wèn)題，而多列布局會(huì)是我們碰到最多的布局問(wèn)題客们，個(gè)人就匯總了開(kāi)發(fā)中常見(jiàn)多列布局問(wèn)題的解決方法崇决。一般，按列數(shù)分的可以分為兩列布局底挫，三列布局恒傻，多列布局，其中布局方法中的原理都有類(lèi)似之處建邓。
目錄
一盈厘、定寬+自適應(yīng)兩列布局
二、兩列定寬官边，一列自適應(yīng)布局
三沸手、左邊不定寬，右邊自適應(yīng)布局
四注簿、多列不定寬罐氨，一列自適應(yīng)
五、等寬布局解決方案
六滩援、等高布局解決方案
(文中Css代碼中顏色需自行添加)
一栅隐、定寬+自適應(yīng)兩列布局
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right"><p>right</p></div>
</div>
-
需求：實(shí)現(xiàn)左側(cè)100px，右側(cè)自適應(yīng)，且間距20px
image-20190623235624776.png
方法一：左側(cè)浮動(dòng)租悄，右側(cè)寬度通過(guò)margin調(diào)整
.left {
float: left;
width: 100px;
}
.right {
margin-left: 120px; //相差的20px是左右之間的間距
}
方法二：左側(cè)浮動(dòng)谨究，右側(cè)BFC
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
方法三：table
單元格默認(rèn)會(huì)等寬，但是table-layout: fixed能夠讓table元素布局優(yōu)先泣棋，胶哲。
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left, .right {
display: table-cell;
}
.left {
width: 100px;
padding-right: 20px;
}
方法四：flex
.parent {
display: flex;
}
.left {
width: 100px;
margin-right: 20px;
}
.right {
flex: 1
}
方法五：css3 calc()計(jì)算屬性
.left {
display: inline-block;
width: 100px;
margin-right: 20px;
}
.right {
display: inline-block;
width: calc(100% - 120px);
}
二、兩列定寬潭辈，一列自適應(yīng)布局
多列布局用到的屬性原理基本都一樣鸯屿，上面的方法也同樣適用于此。
<div class="parent">
<div class="left"><p>left</p></div>
<div class="center"><p>center</p></div>
<div class="right"><p>right</p></div>
</div>
需求1：left和center定寬100px把敢，right自適應(yīng)寄摆。
需求2：left和right定寬100px，center自適應(yīng)修赞。
需求1使用的方法跟上面有相同之處婶恼，不做贅述。重點(diǎn)以需求2為例說(shuō)明柏副。
方法一：父元素相對(duì)布局勾邦，子元素絕對(duì)布局
.parent {
position: relative;
}
.left{
position: absolute;
left: 0px;
top: 0px;
width: 100px;
}
.right {
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}
.center {
margin: 0 120px;
}
方法二：flex布局
.parent {
display: flex;
}
.left, .right {
width: 100px;
}
.left {
margin-right: 20px;
}
.right {
margin-left: 20px;
}
.center {
flex: 1;
}
方法三：雙飛翼布局
雙飛翼布局需要將center塊提前，并且需要在center的內(nèi)嵌包裹塊割择，方便設(shè)置間距眷篇，注意在設(shè)置center寬度為100%的時(shí)候，要將center的盒模型轉(zhuǎn)換為IE盒模型荔泳，這樣它的寬度就包含了padding蕉饼。
<div class="parent">
<div class="center">
<div class="content">
<p>center</p>
</div>
</div>
<div class="left"><p>left</p></div>
<div class="right"><p>right</p></div>
</div>
.center, .left, .right {
float: left;
}
.left {
width: 100px;
margin-left: -100%;
}
.right {
width: 100px;
margin-left: -100px;
}
.center {
box-sizing: border-box;
width: 100%;
padding-left: 120px;
padding-right: 120px;
}
.content {
height: 100%;
}
三、左邊不定寬换可，右邊自適應(yīng)布局
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right"><p>right</p></div>
</div>
- 需求：左側(cè)不定寬，右側(cè)自適應(yīng)厦幅，間距20px沾鳄。
方法一：float + overflow
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
方法二：table布局
由內(nèi)容決定寬度，不由布局決定寬度确憨，取消table-layout：fixed的作用
.parent {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
}
.left {
width: 0.1% //取最小寬度译荞，實(shí)際寬度由內(nèi)容決定
padding-right: 20px;
}
方法三：flex
.parent {
diaplay: flex;
}
.left {
margin-right: 20px;
}
.right {
flex: 1;
}
四、多列不定寬休弃，一列自適應(yīng)
同 **三吞歼、左邊不定寬，右邊自適應(yīng)布局 ** 方法相同塔猾。
五篙骡、等寬布局解決方案
<div class="parent">
<div class="column"><p>column1</p></div>
<div class="column"><p>column2</p></div>
<div class="column"><p>column3</p></div>
<div class="column"><p>column4</p></div>
</div>
- 需求：多列等寬，并保留20px間距。
方法一：margin + float
此時(shí)需要考慮多個(gè)間距的問(wèn)題糯俗，缺點(diǎn)：需要提前知道有多少列計(jì)算好每列寬度占比+間距尿褪，具體就是讓父元素多擁有20px的寬度。
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
方法二：table
此時(shí)需要在parent元素外層再添加一層盒子parent-layout得湘，并設(shè)置寬度使得寬度再增加20px杖玲。
<div class="parent-layout">
<div class="parent">
<div class="column"><p>column1</p></div>
<div class="column"><p>column2</p></div>
<div class="column"><p>column3</p></div>
<div class="column"><p>column4</p></div>
</div>
</div>
.parent-layout {
margin-left: -20px;
}
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.column {
display: table-cell;
padding-left: 20px;
}
方法三：flex
.parent {
display: flex;
}
.column {
flex: 1;
}
.column + .column {
margin-left: 20px;
}
六、等高布局解決方案
除了解決分欄的問(wèn)題之外淘正，我們同時(shí)需要解決分列后等高布局的解決方法：
方法一：table
利用table單元格本身具有等高特性
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left, .right {
display: table-cell;
}
.left {
widht: 100px;
border-right: 20px solid transparent;
background-clip: padding-box; //由于是border-box摆马，需要把背景顏色去掉
}
方法二：flex
.parent {
display: flex;
}
.left {
width: 100px;
margin-right: 20px;
}
.right {
flex: 1;
}
方法三：float
偽等高
.left, .right {
flex: left;
width: 100%;
margin-right: 20px;
}
.right {
overflow: hidden;
}
.left, .right {
padding-bottom:9999px;
margin-bottom: -9999px;
}
.parent {
overflow: hidden;
}
(文中樣式代碼中的背景顏色可自行添加)
說(shuō)明：
- BFC（塊級(jí)格式上下文），可以實(shí)現(xiàn)和浮動(dòng)元素共存鸿吆，且不會(huì)遮擋浮動(dòng)元素囤采，通過(guò)overflow:hidden,
作用：避免邊距折疊，不被浮動(dòng)元素遮蓋伞剑。且BFC能夠?qū)?nèi)容元素浮動(dòng)清除斑唬，避免高度塌陷。
喜歡那就點(diǎn)個(gè)贊吧??
（完）
