阿里團隊常用的佈局——雙飛翼佈局
阿新 • • 發佈：2018-12-20
雙飛翼佈局新手來說不太好理解，光靠死記不行，理解了以後就能輕易寫出來。獻上程式碼：
<head> <meta charset="UTF-8"> <title>雙飛翼</title> <style> .wrap { width: 90%; margin: 0 auto; } .left { width: 200px; height: 700px; background: red; float: left; margin-left: -100%; } .right { width: 200px; height: 700px; background: red; float: right; margin-left: -200px; } .main { width: 100%; float: left; background: pink; } .content { height: 700px; background: yellow; margin: 0 210px; } </style> </head> <body> <div class="wrap"> <div class="main"> <div class="content">content</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body>
雙飛翼佈局的好處：是淘寶團隊提出一種優化寫法，main寫在前面，優先載入，優先渲染，而且相容性好。
理解雙飛翼佈局的幾個關鍵點：
①main是自適應寬度的，所以width:100%;
②main、left、right都是float:left;，但是main的寬度是100%，所以left、right被擠到第二行；
③如何讓left和right移動到正確的位置呢？
理解時應該考慮浮動的特性，假設main是固定寬度的，全都左浮動以後，main、left、right應該排在同一行。
那麼要讓left移動到左邊就容易了，只需要向左邊移動一個main的寬度就可以了，所以就是margin-left:-100%;
因為main的寬度是100%，要讓right移動到右邊，則只需要給right一個200的寬度，讓它移動上去就行了，所以就是margin-left:-200px;
④此時，left和right實際上是疊在main的左右兩邊的，這就是在寫結構時，要在main裡面多寫一層content的原因，只要給content一個margin:0 210px;裡面的內容就不會被left和right擋住，雙飛翼佈局也就實現了。