使用CSS實現三欄自適應佈局（兩邊寬度固定，中間自適應）
阿新 • • 發佈：2019-01-25
所謂三列自適應佈局指的是兩邊定寬，中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。 我這裡主要分為兩大類，一類是基於position傳統的實現，一類是基於css3新特性彈性盒模型佈局實現。
1. 基於傳統的position和margin等屬性進行佈局
這裡也分為三種方法，分別為絕對定位法，聖盃佈局，自身浮動法。1).絕對定位法
絕對定位法原理是將左右兩邊使用absolute定位，因為絕對定位使其脫離文件流，後面的center會自然流動到他們上面，然後使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應螢幕寬度。 程式碼如下：css程式碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>layout_box</title> <link rel="stylesheet" type="text/css" href="../css/layout_box.css"> </head> <body> <h3>實現三列寬度自適應佈局</h3> <div id = "left">我是左邊</div> <div id = "right">我是右邊</div> <div id = "center">我是中間</div> </body> </html>
html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; } 2).使用自身浮動法
自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文件流，中間元素正常在正常文件流中，使用margin指定左右外邊距對其進行一個定位。
HTML程式碼：
<h3>使用自身浮動法定位</h3>
<div id = "left_self">我是左邊</div>
<div id = "right_self">我是右邊</div>
<div id = "center_self">我是中間</div>#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}3). 聖盃佈局
聖盃佈局的原理是margin負值法。使用聖盃佈局首先需要在center元素外部包含一個div，包含div需要設定float屬性使其形成一個BFC，並設定寬度，並且這個寬度要和left塊的margin負值進行配合，具體原理參考這裡。這裡對聖盃佈局解釋特別詳細。 實現程式碼：HTML文件：<h3>使用margin負值法進行佈局</h3>
<div id = "wrap">
<div id = "center"></div>
</div>
<div id = "left_margin"></div>
<div id = "right_margin"></div>#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}
2 ， css3新特性
在外圍包裹一層div，設定為display：flex；中間設定flex：1；但是盒模型預設緊緊挨著，可以使用margin控制外邊距。
程式碼：
<div id = "box">
<div id = "left_box"></div>
<div id = "center_box"></div>
<div id = "right_box"></div>
</div>#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}
效果圖如下：
css佈局還有很多其他特性，下一步準備研究清楚浮動，再研究position、和display屬性。