雙飛翼佈局新手來講不太好理解，光靠死記不行，理解了之後就能輕易寫出來。獻上代碼：佈局
<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寫在前面，優先加載，優先渲染，並且兼容性好。優化
理解雙飛翼佈局的幾個關鍵點：spa
①main是自適應寬度的，因此width:100%;code
②main、left、right都是float:left;，可是main的寬度是100%，因此left、right被擠到第二行；blog
③如何讓left和right移動到正確的位置呢？it
理解時應該考慮浮動的特性，假設main是固定寬度的，全都左浮動之後，main、left、right應該排在同一行。class
那麼要讓left移動到左邊就容易了，只須要向左邊移動一個main的寬度就能夠了，因此就是margin-left:-100%;兼容性
由於main的寬度是100%，要讓right移動到右邊，則只須要給right一個200的寬度，讓它移動上去就好了，因此就是margin-left:-200px;渲染
④此時，left和right其實是疊在main的左右兩邊的，這就是在寫結構時，要在main裏面多寫一層content的緣由，只要給content一個margin:0 210px;裏面的內容就不會被left和right擋住，雙飛翼佈局也就實現了。meta