身无彩凤“双飞翼”，心有灵犀一点通

身无彩凤“双飞翼”，心有灵犀一点通。

当我第一次在css课程中见“双飞翼”这三个字我就想到这句诗，一开始我也不知道，双飞翼和CSS能有啥关联，知道学完了才恍然大悟。

首先先按词想象，双飞翼不就是两个翅膀么~

那大概就是无论吃得多胖，两个翅膀永远不变，肚子在变大变小！

效果图献上：

接下来就来一步一步实现吧！

首先是html部分，需要一个大div，里面分别放三个div，依次是center、left、right。为啥第一次要放center？ 一开始我也很奇怪，不过到最后明白是为了优先加载！

<div class="container">
        <div class="center">
            大肚腩高丽头！
        </div>
        <div class="left">这是我的左翅膀！</div>
        <div class="right">这是我的右翅膀！</div>
</div>

接下来就是双飞翼的第一步：浮动

给三个div添加float：left；属性是它们浮动起来；

双飞翼的羽翼也需要设置下，为了让它们保持不动，设置宽度为固定在，此时设为300px，同时给最外层加宽度，设置为1000px，还有清一下浮动，把overflow设置为hidden即可；

此时为这样：

额~好像不太行，没事，咱继续~

第二步：水平

首先给center的宽度设置100%，此时会发现center占满一行，把其他两个挤下去了，此时就需要负margin来让它们处于同一水平线！left的margin-left设为-100%，right的margin-left设为-300px（300px的取值是根据宽度决定的）；

代码如下：

        .container {
            border: 1px solid #000;
            width: 1000px;
            margin: 0px auto;
            overflow: hidden;
        }
        
        .center {
            float: left;
            background: yellow;
            width: 100%;
        }
        
        .left {
            float: left;
            background: green;
            width: 300px;
        }
        
        .right {
            float: left;
            background: pink;
            width: 300px;
        }

这次看下效果：

有点意思了，但是中间的文字被挡住了，接下来就来解决掉！

第三步：加div

解决的方法就是在center的div标签内部再加一个div，把文字放进去，设置margin为左右两列的宽度即可；

这下对了，既然说中间变化两边不变，那么就测试一下把，把最外层的设置为800px、1500px；

可以可以，中间变，两侧不变，满足要求，完成！