一、介紹
下邊將介紹前端很流行的布局方式，要求兩邊固定，中間自適應。比較流行的布局方式有聖杯布局，雙翼布局，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 。