聖盃佈局和雙飛翼佈局

聖盃佈局跟雙飛翼佈局的實現，目的都是左右兩欄固定寬度，中間部分自適應。
聖盃佈局實現的思路是：
一、將最外層的container的padding設置爲 padding: 0 220px 0 200px;爲左右兩塊讓出空間；
二、將#middle, #left, #right三者設爲浮動；
三、將middle的width設置爲100%；
四、分別給#left設置margin-left，#right設置margin-right，將left和right拉到與middle同一水平；
五、再用定位將左右位置設置好。
html代碼：

<div id="container">
        <div id="middle"></div>
        <div id="left"></div> 
        <div id="right"></div>   
    </div>

css代碼：

*, body {
            margin: 0;
            padding: 0;
        }
        #container {
            padding: 0 220px 0 200px;
            background: gray;
            height: 400px;
            overflow: hidden;
        }
        #middle, #left, #right {
            height: 400px;
            min-height: 130px;
            float: left;
            position: relative;
        }
        #middle {
            width: 100%;
        }
        #left {
            width: 200px;
            background: red;
            margin-left: -100%;
            left: -200px;
        }
        #right {
            width: 220px;
            background: orange;
            margin-right: -220px;
        }

雙飛翼佈局實現的思路是：
一、將#main, #sub, #extra三者設爲浮動；
二、分別給#sub設置margin-left，#extra設置margin-left，將sub和extra拉到與main同一水平
三、將main的width設爲100%；
四、在main里加一個main-inner，設置其margin-left、margin-right，爲sub、extra騰出位置；
html代碼：

<div id="main">
        <div id="main-inner">

        </div>
    </div>
    <div id="sub"></div>
    <div id="extra"></div>

css代碼：

*, body {
            margin: 0;
            padding: 0;
        }
        #main, #main-inner, #sub, #extra {
            height: 400px;
            min-height: 130px;
            float: left;
        }
        #sub {
            width: 200px;
            margin-left: -100%;
            background: red;
        }
        #extra {
            width: 220px;
            margin-left: -220px;
            background: orange;
        }
        #main {
            width: 100%;
            background: green;
        }
        #main-inner {
            margin-left: 200px;
            margin-right: 220px;
            background: green;
        }

相同：
一、都用了浮動
二、都利用負的margin值，將兩邊拉到與中間同一水平
三、將中間的width設置爲100%
區別：
一、前者用最外層的container的padding爲左右騰出空間。後者在中間main里加了一個main-inner，併爲左右騰出空間。
二、前者用到定位position，後者則在第2步驟中完成位置設置。