雙飛翼布局 · 前端筆記

# 雙飛翼布局最常見的雙飛翼布局實現方法。 ## 需求雙飛翼布局左中右三列布局，渲染順序中間列書寫在前保證提前渲染，左右兩列定寬，中間列自適應剩余寬度。雙飛翼布局與圣杯布局的不同之處，圣杯布局的的左中右三列容器，中間middle多了一個子容器存在，**通過控制 middle 的子容器的 margin 或者 padding 空出左右兩列的寬度**。 ## 關鍵點 * 雙飛翼布局的關鍵點是通過 margin-left 屬性將左右兩列放置到準確的位置，通過控制 middle 的子容器的 margin 或者 padding 空出左右兩列的寬度 * 雙飛翼布局的關鍵點父元素不需要設置 padding * 雙飛翼布局的關鍵點 margin-left 取值為百分比時，是以其父元素的寬度為基準的 ## 實現 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>雙飛翼布局</title> <style> body { margin: 0; } div { height: 150px; } .container { overflow: hidden; } .left, .right, .middle { margin-bottom: -9999px; padding-bottom: 9999px; } .left { float: left; margin-left: -100%; width: 300px; background: orange; } .right { float: left; margin-left: -200px; width: 200px; background: orange; } .middle { float: left; width: 100%; background: yellow; } .middle .inner { margin-left: 300px; } </style> </head> <body> <div class="container"> <div class="middle"> <div class="inner">中</div> </div> <div class="left">左<p>123</p></div> <div class="right">右</div> </div> </body> </html> ``` # 參考資料 [CSS Inspiration -- CSS靈感](https://chokcoco.github.io/CSS-Inspiration/#/./layout/double-wing-layout) 京城一燈