css布局之双飞翼布局

双飞翼布局：为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

 实现思路：

　　1.首先创建一出dom文档结构如下：

<div class="container">
        <div class="center">
            <p>主体内容区</p>
        </div>
        <div class="left"></div>
        <div class="right"></div>
</div>

　　2.设置各列的宽度和浮动，为左右两列留出空间

* {
            margin: 0;
            padding: 0;
        }
        
        .center {
            height: 100px;
            width: 100%;
        }
        
        .center,
        .left,
        .right {
            float: left;
        }
        
        .center p {
            height: 100%;
            background-color: yellow;
            padding: 0 220px 0 200px;
        }
        
        .left {
            width: 200px;
            height: 100px;
            margin-left: -100%;
            background-color: blue;
        }
        
        .right {
            width: 220px;
            height: 100px;
            margin-left: -220px;
            background-color: green;
        }