图解圣杯布局与双飞翼布局--CSS布局实战一

版权声明：如有转载请注明出处 https://blog.csdn.net/hdp134793/article/details/82178776

本质：均是两侧顶宽（宽度固定），中间自适应
适用：电商网页pc移动端展示，比如淘宝、京东等电商网页都有应用。
区别：只是中间自适应的处理方式不同。
圣杯布局： 中间主要是直接撑满，然后让左右通过相对绝对定位（position）来浮动。
双飞翼布局：中间同样充满，在中间再放一层内部div,然后设置该内部div的margin和左右两边的margin即可。
图解：
圣杯布局如下：

如上图所示.mid的div是直接撑满，然后左右分别相对绝对定位。
双飞翼布局如下：

其.mid的div依旧是填满的，左右直接margin来固定位置，但是.mid的内部就是margin的定位，如下图所示：

最后我们在看看两个布局的区别

这样就很明显了，两个布局的区别和相同点一目了然。
代码模块：
Html：

<div class="bgbody">
    <!-- 广告栏 -->
        <div class="shopadver"></div>
        <!-- 圣杯布局 -->

        <div class="shopmid1">
            <div class="mid txt">中间</div>
            <div class="left txt">左边</div>
            <div class="right txt">右边</div>
        </div>
        <div class="title">1.圣杯布局</div>
        <!-- 双飞翼布局 -->

        <div class="shopmid2">
            <div class="mid">
                <div class="inner txt">中间</div>
            </div>
            <div class="left txt">左边</div>
            <div class="right txt">右边</div>
        </div>
        <div class="title">2.双飞翼布局</div>
    </div>

Css:

html,body{
    margin :0;
    padding :0;
    width:100%;
    height:100%;
}
div{
    position:relative;
}
.title{
    height:60px;
    font-size:24px;
    color:#FF8C69;
    text-align:center;
    line-height:50px;
}
.txt{
    font-size:24px;
    color:#Fff;
    text-align:center;
    line-height:50px;
}
.bgbody{
    width:100%;
    height:100%;
}
.shopadver{
    width:96%;
    height:9%;
    border:1px solid blue;
    margin:0 auto;
}
.shopmid1{
    width:36%;
    height:10%;
    position:relative;
    border:1px solid red;
    margin:0 auto;
    padding:0 150px;
}
.shopmid1 .mid{
    width:100%;
    height:100%;
    background-color:#4682B4;
    float:left;
}
.shopmid1 .left{
    width:150px;
    height:100%;
    background-color:#9FB6CD;
    float:left;
    margin-left:-100%;

    position:relative;
    left:-150px;
}
.shopmid1 .right{
    margin-left: -150px;
    width: 150px;
    height:100%;
    background-color:#9FB6CD;
    float:left;
    position:relative;
    right:-150px;
}
.shopmid2{
    width:36%;
    height:10%;
    position:relative;
    border:1px solid red;
    margin:0 auto;
}
.shopmid2 .mid{
    width:100%;
    height:100%;
    background-color:#4682B4;
    float:left;
}
.shopmid2 .left{
    width:150px;
    height:100%;
    background-color:#9FB6CD;
    float:left;
    margin-left:-100%;
}
.shopmid2 .right{
    margin-left: -150px;
    width: 150px;
    height:100%;
    background-color:#9FB6CD;
    float:left;
}
.inner{
    margin:0 150px;
    height:100%;
}

有不当之处还望广大读者指正，喜欢这个文章的小伙伴麻烦关注下，后续还有更多的经典布局介绍。