css三栏布局（圣杯布局和双飞翼布局）学习

爱吃草莓蛋挞

已于 2023-04-05 17:34:48 修改

阅读量215

点赞数 2

文章标签： css html5 前端

于 2023-02-24 15:33:36 首次发布

本文链接：https://blog.youkuaiyun.com/gyt66699/article/details/129178295

版权

文章详细介绍了三栏布局的两种常见实现方式——圣杯布局和双飞翼布局。圣杯布局利用盒子模型的padding来预留空间，而双飞翼布局则通过内容区域的margin来定位。这两种方法都有其优缺点，圣杯布局可能会在某些极端情况下出现混乱，而双飞翼布局虽然多了一层DOM结构，但更为稳定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三栏布局是经常被使用到的布局，通常中间center部分内容较多，会被优先加载，需要将剩余空间100%填满；两边的left和right固定宽度。

三栏布局常由圣杯布局或者双飞翼布局组成。

首先说一下圣杯布局

<h1>圣杯布局</h1>
    <div class="box">
        <div class="center">content</div>
        <div class="left1"></div>
        <div class="right1"></div>
    </div>

一定要记得将grail大盒子清除浮动，不然会导致父盒子塌陷问题

先写center1盒子（优先加载）

center1盒子width：100%；

设置left1 、right1盒子固定宽度（width：200px为例）

三个盒子都设置为浮动且position：relative；

我们此时发现center盒子将left1、right1盒子挤到了第二行

将left盒子设置为margin-right：-100%；

这时发现left盒子回到了第一行但是压在了center盒子上

我们设置大盒子（class="grail"）的padding-left=200px；腾出空间给left1盒子。

然后将left1盒子的left：-200px；将盒子拉到最左边

同样的方法，我们将右盒子的margin-left：-100%；让right1盒子回到第一行

然后通过设置right：-200px；将右盒子拉到最右边相应位置

最后就可以得到圣杯布局如上图。

.box{
        padding-left: 200px;
        padding-right: 200px;
        overflow: hidden;
        zoom: 1;
        align-items: center;
    }
    /* 双伪元素法清除浮动 */
    .box::after,.box::before{
        content: "";
        display: table;
    }
    .box::after{
        clear: both
    }


    .center{
        position: relative;
        background-color: lightgreen;
        width: 100%;
        height: 200px;
        float: left;
    }
    .left1{
        position: relative;
        background-color: lightpink;
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -100%;
        left: -200px;
    }
    .right1{
        position: relative;
        background-color: lightblue;
        width: 200px;
        height: 200px;
        float: right;
        margin-left: -100%;
        right: -200px;
        left: auto;

    }

然后我们看双飞翼布局

圣杯布局利用 box 的 padding 来保留左右位置的，而双飞翼布局利用 content 的 margin 来留位置的。

    <h1>双飞翼布局</h1>
    <div class="box">
        <div class="center2">
            <div class="content">12356</div>
        </div>
        <div class="left2"></div>
        <div class="right2"></div>
    </div>

很明显，双飞翼布局多了一个dom结构层，这会增加渲染压力。但是双飞翼布局比较稳定，圣杯布局在一些极端情况下会发生混乱。

    /* 双伪元素法清除浮动 */
    .box::after,.box::before{
        content: "";
        display: table;
    }
    .box::after{
        clear: both
    }
    
    /* 中间盒子的内容 */
    .content{
        height: 200px;
        margin: 0 200px 0 200px;
    }
    /* 3个主要盒子 */
    .center2{
        position: relative;
        background-color: rgb(98, 238, 98);
        width: 100%;
        float: left;
    }
    .left2{
        position: relative;
        background-color: rgb(248, 89, 113);
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -100%;
        /*使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子*/
    }
    .right2{
        position: relative;
        background-color: rgb(7, 179, 236);
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        /*移动到最右边*/
    }

效果图展示