聖盃佈局與雙飛翼佈局針對的都是三列左右欄固定中間欄邊框自適應的網頁佈局（想象一下聖盃是主體是加上兩個耳朵；鳥兒是身體加上一對翅膀），聖盃佈局是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最早是由淘寶UED的工程師（傳說是玉伯）改進並傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：
——三列布局，中間寬度自適應，兩邊定寬；
——中間欄要在瀏覽器中優先展示渲染；
——允許任意列的高度最高；
1、聖盃佈局
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實現三欄水平佈局之聖盃佈局</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> |
2、雙飛翼佈局
|
<!DOCTYPE html> .right { |
3、Flex佈局
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實現三欄水平佈局之Flex佈局</title> <style type="text/css"> .container{ display: flex;//下屬的main、left和right三個子元素自動成爲容器成員（flex item） min-height: 130px; } .main{ flex-grow: 1;//設置放大比例，將剩餘空間用main來填充，默認0 background-color: blue; } .left{ order: -1;//定義項目的排列順序，越小越靠前，默認爲0 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> |
4、絕對定位佈局
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實現三欄水平佈局之絕對定位佈局</title> <style type="text/css"> .container{ position: relative; } .main,.right,.left{ top: 0; height: 130px; } .main{ margin: 0 300px 0 200px; background-color: blue; } .right{ position: absolute; width: 300px; right: 0; background-color: red; } .left{ position: absolute; width: 200px; background-color: green; left: 0; } </style> </head> <body> <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html> |