雙飛翼佈局和聖盃佈局程式碼
阿新 • • 發佈：2019-01-31
聖盃佈局<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> header{height: 50px;background: red;} .container{padding:0 200px;overflow: hidden;} .middle,.left,.right{height: 100px;} .middle{float:left;width:100%;background: blue;} .left{float:left;position:relative;left:-200px;margin-left:-100%;width:200px;background: orange;} .right{float:left;position:relative;right:-200px;margin-left:-200px;width:200px;background: green;} footer{height:50px;background:gold} </style> </head> <body> <header></header> <div class="container"> <div class="middle">聖盃佈局</div> <div class="left"></div> <div class="right"></div> </div> <footer></footer> </body> </html>
雙飛翼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> header{height: 50px;background: red;} .container{overflow: hidden;} .middle,.left,.right{height: 100px;} .middle{float:left;width:100%;background: blue;} .middle .inner{margin:0 200px;} .left{float:left;margin-left:-100%;width:200px;background: orange;} .right{float:left;margin-left:-200px;width:200px;background: green;} footer{height:50px;background:gold} </style> </head> <body> <header></header> <div class="container"> <div class="middle"><div class="inner">雙飛翼</div></div> <div class="left"></div> <div class="right"></div> </div> <footer></footer> </body> </html>
兩者差異來自子div（div.inner）。聖盃佈局通過設定容器的padding使左中右三部分壓縮中間，再通過position移動左右部分實現中間自適應，兩邊寬度確定。而雙飛翼佈局通過設定子div的margin使得呈現的內容在中間，不被左右部分擋住。