前端經典佈局（兩邊固定中間自適應）
一、介紹
下邊將介紹前端很流行的佈局方式，要求兩邊固定，中間自適應。比較流行的佈局方式有聖盃佈局，雙翼佈局，flex佈局、絕對定位佈局。
二、聖盃佈局
聖盃佈局，顧名思義，他具有以下特點：
1.三列布局，中間自適應，兩邊定寬；
2.中間欄要求在瀏覽器中優先展示；
接下來我們看實現方式：
div我們這樣寫：
<div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div>
下邊直接看程式碼實現：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> .container { padding: 0 300px 0 200px; } .left, .main, .right { position: relative; min-height: 130px; float: left; } .left { left: -200px; margin-left: -100%; background: green; width: 200px; } .right { right: -300px; margin-left: -300px; background-color: red; width: 300px; } .main { background-color: blue; width: 100%; } </style> </head> <body> <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
出來的樣子就是這樣：
程式碼中main的寬度設為100%，left跟right剛好固定到了左右兩邊。其中使用了一個margin-left為負的值，負的margin-left會讓元素沿文件流向左移動，如果負的數值比較大就會一直移動到上一行。設定left部分的margin-left為-100%,就會使left向左移動一整個行的寬度，由於left左邊是父元素的邊框，所以left繼續跳到上一行左移，一直移動到上一行的開頭，並覆蓋了main部分（仔細觀察下圖，你會發現main裡面的字“main”不見了，因為被left遮住了），left上移過後，right就會處於上一行的開頭位置，這時再設定right部分margin-left為負的寬度，right就會左移到上一行的末尾。 接下來只要把left和right分別移動到這兩個留白就可以了。可以使用相對定位移動 left和right部分。
三、雙翼佈局
聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以形成三欄佈局。不同在於解決 “中間欄div內容不被遮擋”問題的思路不一樣。 程式碼實現：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> <style type="text/css"> .left, .main, .right { float: left; min-height: 130px; text-align: center; } .left { margin-left: -100%; background: green; width: 200px; } .right { margin-left: -300px; background-color: red; width: 300px; } .main { background-color: blue; width: 100%; } .content{ margin: 0 300px 0 200px; } </style> </head> <body> <div class="container"> <div class="main"> <div class="content">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
雙飛翼佈局比聖盃佈局多使用了1個div，少用大致4個css屬性（聖盃佈局container的 padding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，；而雙飛翼佈局子div裡用margin-left和margin-right共2個屬性，比聖盃佈局思路更直接和簡潔一點。簡單說起來就是：雙飛翼佈局比聖盃佈局多建立了一個div，但不用相對佈局了。
四、flex佈局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實現三欄水平佈局之Flex佈局</title> <style type="text/css"> .container{ display: flex; min-height: 130px; } .main{ flex-grow: 1; background-color: blue; } .left{ order: -1; flex-basis: 200px; background-color: green; } .right{ flex-basis: 300px; background-color: red; } </style> </head> <body> <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
五、絕對定位佈局
絕對定位佈局就是相當於把左右兩個div絕對定位到左右兩邊的padding就可以了，這裡就不寫程式碼了。
本文參考CSDN 作者 萌主_iii 。