圣杯布局和双飞翼布局

圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。

直接看例子吧：

1.圣杯布局 

    <div class="header">header</div>
    <div class="body">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

       .header{
         height:50px;
         background: #666;
         text-align: center;
        }
        .body{
            padding: 0 200px 0 200px;
            height: 100px;
        }
        .middle{
            float: left;
            width: 100%;
            height: 100px;
            background: blue;
        }
        .left{
            float: left;
            width: 200px;
            height: 100px;
            background: darkgreen;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            float: left;
            width: 200px;
            height: 100px;
            background: salmon;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
        .footer{
         height:50px;
         background: #666;
         text-align: center;
        }

 

2.双飞翼布局

    <div class="header">header</div>
    <div class="outer">
        <div class="middle"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer"></div>

        .header{
         height:50px;
         background: #666;
         text-align: center;
        }
        .outer{
            float: left;
            width: 100%;
            height: 100px;
            background: blue;
        }
        .left{
            float: left;
            width: 200px;
            height: 100px;
            background: darkgreen;
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 200px;
            height: 100px;
            background: salmon;
            margin-left: -200px;
        }
        .middle{
            margin: 0 200px 0 200px;
            height: 100px;
        }
        .footer{
            clear: both;
            height:50px;
            background: #666;
            text-align: center;
        }