[css]佈局 三欄式佈局，左右定寬，中間內容區域自適應
阿新 • • 發佈：2019-01-05
實現三欄佈局的經典方式有：聖盃佈局，雙飛翼佈局，兩者都是利用父元素的margin/padding來達到想要的效果，同時也是遵循重要內容優先載入的規則(先載入中間部分)。只是在實現上有些不同，同時利用css3的flex佈局也可以實現以上效果。
聖盃佈局：用一個父元素，包裹三個子元素，同時將中間部分寫在前邊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三欄佈局(聖盃佈局)</title> <style> body{ margin: 0; padding: 0; border: 0;} .main{ padding: 0 150px 0 100px;} .left{ width: 100px; background:green; height: 100px; position: relative; float: left; margin-left: -100%; left:-100px;} .middle{ width: 100%; background: red; height: 100px; float: left;} .right{ float: left; height: 100px; background: #5900ce; width: 150px; position: relative; margin-left: -150px; right: -150px;} </style> </head> <body> <div class="main"> <div class="middle">111111111111111</div> <div class="left">222222222</div> <div class="right">333333333333</div> </div> </body> </html>
雙飛翼佈局：雙飛翼佈局不用一個div包裹所有子元素，只需要包裹中間自定義區域，還是要將元素進行float的定位，然後利用center元素的margin+Left等的負margin實現效果，因為沒有使用padding使得Left、right元素不需要進行定位，雙飛翼佈局實現上比聖盃佈局簡單。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雙飛翼佈局</title> <style> body{ margin: 0; padding: 0;} .main,.left,.right{ float: left; height: 100px;} .main_a{ margin: 0 120px 0 100px; height: 100px; background: #5900ce;} .main{ width: 100%;} .left{ width: 100px; background: #0406e6; margin-left: -100%;} .right{ width: 120px; height: 100px; background: #fff473; margin-left: -120px;} </style> </head> <body> <div class="main"> <div class="main_a"></div> </div> <div class="left"></div> <div class="right"></div> </body> </html>
flex佈局：flex彈性佈局中要是利用了其自身的一些屬性，相比其他的方式而言，flex的方式會更加簡潔，利用order調整元素的放置位置，Left、right的寬度固定，不用設定flex的值，只有center的值是隨機變化的所以需要設定flex：1 1 width，其相當於三個屬性的組合屬性：flex-grow、、flex-basis。
flex-grow：
| number | 一個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。預設值是 0。 |
flex-basis：
| number | 一個長度單位或者一個百分比，規定靈活專案的初始長度。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex三欄式佈局</title>
<style type="text/css">
.container{
display:flex;
}
.center{
flex: 1 1 300px;
order:2;
background:blue;
}
.left{
width:220px;
background:green;
order:1;
}
.right{
width:220px;
background: #f00;
order:3;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<h4>middle</h4>
<p>HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>
</div>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<h4>right</h4>
<p>BBBBBBBBBBBBBB
888888888888888888
BBBBBBBBBBBBBBBBBB
88888888888888888888</p>
</div>
</div>
</body>
</html>