最近面试的时候遇到一个提问说，如何做到一个左右宽度固定，中间自适应的布局，我的答案不重要，重要的是不是面试官想听到的答案，这样问大概率他想听到的答案一定是双飞翼布局，所以今天就手敲一个双飞翼布局让大家搞明白。

1. 首先我们有三个盒子div，分别是center、left、right

<div class="container"><div class="center">中间</div><div class="left">左</div><div class="right">右</div>
</div>

2. 然后我们给三个div设置宽高和背景色，方便我们看,中间要自适应，所以宽度为100%

        .center {background-color: pink;width: 100%;height: 100vh;}.left {background-color: red;width: 200px;height: 100vh;}.right {background-color: blue;width: 200px;height: 100vh;}

3. 我们为了让三个div在同一行，所以设置container下的三个div都浮动布局

		.container div{float: left;}

此时效果是这样的，左右两个div是被挤下去

4. 我们通过margin-left值把左右两个div给定位到一行，左边-100%，右边div宽度是多少，就负的多少px

        .left {background-color: red;width: 200px;height: 10vh;margin-left: -100%;}.right {background-color: blue;width: 200px;height: 10vh;margin-left: -200px;}

就这样了，拜~