css如何實現圣杯布局或雙飛翼布局

這篇文章主要介紹css如何實現圣杯布局或雙飛翼布局，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

圣杯布局/雙飛翼布局

經典的圣杯布局和雙飛翼布局都是由左中右三列組成，其特點為左右兩列寬度固定、中間一列寬度自適應和三列高度固定且相等。其實也是上述兩列布局和三列布局的變體，整體的實現原理與上述N列布局一致，可能就是一些細節需注意。

圣杯布局和雙飛翼布局在大體相同下也存在一點不同，區別在于雙飛翼布局中間列需插入一個子節點。在常規實現方式里也是在這個中間列里做文章，如何使中間列內容不被左右列遮擋。

• 相同

• 中間列放首位且聲明其寬高占滿父節點

• 被擠出的左右列使用float和margin負值將其拉回與中間列處在同一水平線上

• 不同

• 圣杯布局：父節點聲明padding為左右列留出空位，將左右列固定在空位上

• 雙飛翼布局：中間列插入子節點并聲明margin為左右列讓出空位，將左右列固定在空位上

圣杯布局float + margin-left/right + padding-left/right

由于浮動節點在位置上不能高于前面或平級的非浮動節點，否則會導致浮動節點下沉。因此在編寫HTML結構時，將中間列節點挪到右列節點后面。

<div class="grail-layout-x">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

.grail-layout-x {
    padding: 0 100px;
    width: 400px;
    height: 400px;
    .left {
        float: left;
        margin-left: -100px;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        float: right;
        margin-right: -100px;
        width: 100px;
        height: 100%;
        background-color: #66f;
    }
    .center {
        height: 100%;
        background-color: #3c9;
    }
}

雙飛翼布局float + margin-left/right

HTML結構大體同上，只是在中間列里插入一個子節點<div>。根據兩者區別，CSS聲明會與上述圣杯布局有一點點出入，可觀察對比找出不同地方。

<div class="grail-layout-y">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        <div></div>
    </div>
</div>

.grail-layout-y {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        float: right;
        width: 100px;
        height: 100%;
        background-color: #66f;
    }
    .center {
        margin: 0 100px;
        height: 100%;
        background-color: #3c9;
    }
}

圣杯布局/雙飛翼布局flex

使用flex實現圣杯布局/雙飛翼布局可忽略上述分析，左右兩列寬度固定，中間列寬度自適應。

<div class="grail-layout">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.grail-layout {
    display: flex;
    width: 400px;
    height: 400px;
    .left {
        width: 100px;
        background-color: #f66;
    }
    .center {
        flex: 1;
        background-color: #3c9;
    }
    .right {
        width: 100px;
        background-color: #66f;
    }
}

以上是“css如何實現圣杯布局或雙飛翼布局”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！