圖解聖杯布局與雙飛翼布局--CSS布局實戰一

本質：均是兩側頂寬（寬度固定），中間自适應

适用：電商網頁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 :;
    padding :;
    width:%;
    height:%;
}
div{
    position:relative;
}
.title{
    height:px;
    font-size:px;
    color:#FF8C69;
    text-align:center;
    line-height:px;
}
.txt{
    font-size:px;
    color:#Fff;
    text-align:center;
    line-height:px;
}
.bgbody{
    width:%;
    height:%;
}
.shopadver{
    width:%;
    height:%;
    border:px solid blue;
    margin: auto;
}
.shopmid1{
    width:%;
    height:%;
    position:relative;
    border:px solid red;
    margin: auto;
    padding: px;
}
.shopmid1 .mid{
    width:%;
    height:%;
    background-color:#4682B4;
    float:left;
}
.shopmid1 .left{
    width:px;
    height:%;
    background-color:#9FB6CD;
    float:left;
    margin-left:-%;

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

有不當之處還望廣大讀者指正，喜歡這個文章的小夥伴麻煩關注下，後續還有更多的經典布局介紹。