前端学习笔记_css双飞翼布局&圣杯布局

在我看来，圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。那么它们又有哪些区别呢？

双飞翼布局

顾名思义，双飞翼布局就仿佛是一只鸟，main就相当于鸟的身体，而aside和ad则是翅膀，先决定main放在哪里，再把aside和ad放在合适的位置。

• 在html结构中，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结构如下：

<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结构中，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结构如下：

<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;
    }