在我看來，圣杯布局跟雙飛翼布局的實現(xiàn)，目的都是左右兩欄固定寬度，中間部分自適應。那么它們又有哪些區(qū)別呢？

雙飛翼布局

顧名思義，雙飛翼布局就仿佛是一只鳥，main就相當于鳥的身體，而aside和ad則是翅膀，先決定main放在哪里，再把aside和ad放在合適的位置。

• 在html結(jié)構(gòu)中，main要放在最前面，因為瀏覽器是從上至下加載頁面的
• main,aside,ad都要float:left;
• main要width:100%;aside要margin-left: -100%;那么ad則margin-left: -150px;
• 給main > inner使用：margin-left: 200px;margin-right: 150px;即可

html結(jié)構(gòu)如下：

<div class="main">
    <div class="inner"> main </div>
</div>
<div class="aside"> aside </div>    
<div class="ad"> ad </div>

css設置如下：

.main{
        width: 100%;
        float: left;
    }

.main > .inner{
        margin-left: 200px;
        margin-right: 150px;
        background: deeppink;
    }

.aside{
        width: 200px;
        float: left;
        margin-left: -100%;
        background: pink;
    }

.ad{
        width: 150px;
        float: left;
        margin-left: -150px;
        background: pink;
    }

圣杯布局

• 在html結(jié)構(gòu)中，main要放在最前面
• main,aside,ad都要float:left;position: relative;
• main要width:100%;
• aside要margin-left: -100%;再設置right: 200px;
• 設置wrap的padding-left: 200px;padding-right: 150px;
• ad直接：margin-right: -150px;即可。

html結(jié)構(gòu)如下：

<div class="wrap">
    <div class="main"> main </div>
    <div class="aside"> aside </div>    
    <div class="ad"> ad </div>
</div>

css設置如下：

.wrap{
        padding-left: 200px;
        padding-right: 150px;
    }

    
.main{
        position: relative;
        width: 100%;
        float: left;
        background: deeppink;
    }


.aside{
        position: relative;
        width: 200px;
        float: left;
        margin-left: -100%;
        background: pink;
        right: 200px;
    }

.ad{
        position: relative;
        width: 150px;
        float: left;
        margin-right: -150px;
        background: pink;
    }