html双翼布局,双飞翼布局

# 双飞翼布局

最常见的双飞翼布局实现方法。

## 需求

双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。

双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，**通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度**。

## 关键点

* 双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度

* 双飞翼布局的关键点父元素不需要设置 padding

* 双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的

## 实现

```

双飞翼布局

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;

}

中

左

123

右

```

# 参考资料

[CSS Inspiration -- CSS灵感](https://chokcoco.github.io/CSS-Inspiration/#/./layout/double-wing-layout)

京城一灯