实现三列布局，中间自适应，两边等宽 -双飞翼布局

面试中常常会被问到中间自适应，两边等宽的布局如何实现的问题，今天带大家用双飞翼布局实现一下，另外想用到圣杯布局去达到同样效果的可以参考我写的上一篇文章！

---

实现双飞翼布局步骤

1.三个盒子浮动

2.中间盒子左右margin留出位置，然后左右负边距

---

下面带大家简单实现一下

div布局（示例）：

需要注意的是：中间盒子外边要套个盒子，若只是给中间盒子设置外边距，会撑大整个盒子的宽度，影响布局。

   <div class="container">
        <div class="wrapper">
            <div class="center">#center</div>
        </div>
        <div class="left">#left</div>
        <div class="right">#right</div>
    </div>

css样式（示例）：

        .container {
            height: 500px;
        }

        .left {
            height: 100%;
            width: 200px;
            background-color: skyblue;
            margin-left: -100%;
        }
        .wrapper{
            width: 100%;
            height: 100%;
            background-color: rgb(186, 206, 223);
        }
        .center {
            height: 100%;
            margin-left: 200px;
            margin-right: 300px;
        }
        .right {
            width: 300px;
            height: 100%;
            background-color: darkgray;
            margin-left: -300px;
        }
        .left,.wrapper,.right {
            text-align: center;
            line-height: 500px;
            float: left;
        }
        

---

尾语

写到这里就已经实现了三列布局，中间自适应，两边等宽的效果了。希望对前端小伙伴有所帮助，谢谢大家的支持！