双飞翼布局 · 前端笔记

# 双飞翼布局最常见的双飞翼布局实现方法。 ## 需求双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间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) 京城一灯