三栏布局（左右固定，中间自适应）

最新推荐文章于 2022-04-15 20:45:13 发布

原创最新推荐文章于 2022-04-15 20:45:13 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了使用CSS实现三栏布局的七种方法，包括BFC、定位、表格、网格、Flex布局以及经典的圣杯和双飞翼布局。重点解析了圣杯和双飞翼布局的异同，指出两者都是为了解决两侧定宽、中间自适应的问题，通过不同的布局策略防止中间栏内容被遮挡。

这是公共代码

 * {
            margin: 0;
            padding: 0;
        }
        
        .left {
            background-color: blueviolet;
            width: 300px;
        }
        
        .right {
            background-color: yellow;
            width: 300px;
        }
        
        .center {
            background-color: red;
        }
        
        .left,
        .right,
        .center {
            height: 200px;
        }

方法一：BFC

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
        左右float固定，中间设置bfc（overflow：auto；width：auto）
        </div>
    </div>

.left {
    float: left;
}

.right {
    float: right;
}

.center {
    width: auto;
    overflow: auto;
}

方法二：定位

<div class="box">
        <div class="left"></div>
        <div class="center">
        左右中间position：absolute绝对定位，
        中间left，和right移动
        </div>
        <div class="right"></div>
    </div>

.left,
.center,
.right {
    position: absolute;
}

.left {
    left: 0;
}

.right {
    right: 0;
}
.center {
    left: 300px;
    right: 300px;
}

方法三：表格

<div class="box">
        <div class="left"></div>
        <div class="center">
        1. 将父盒子display：table，width：100% 
        2. 子盒子，left center right设置display：table-cell 
        3.  左右设置宽度，中间不设置
        </div>
        <div class="right"></div>
    </div>

.box {
    display: table;
}

.left,
.center,
.right {
    display: table-cell;
}

方法四：网格

<div class="box">
        <div class="left"></div>
        <div class="center">
        1. 父盒子设置display：grid，宽度100% 
        2.  设置父盒子，grid-template-colums：300px 1fr 300px 
        3.  Box—>(left-center-right)
        </div>
        <div class="right"></div>
    </div>

.box {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
}

方法五：flex

<div class="box">
        <div class="left"></div>
        <div class="center">
        1. 设置父元素display：flex，width：100% 
        2. 设置左右子元素宽度
        </div>
        <div class="right"></div>
    </div>

.box {
    display: flex;
}
.center {
    width: 100%;
}

方法六：圣杯布局

<div class="box">
        <div class="center">
        1. 将三者都float：left，再加上一个position：relitive 
        2. center部分width：100%占满 
        3. center占满后，将left/right拉到最左/右边，margin-left：-100% 
        4. 这时left拉回来了，但会覆盖center内容的左端，要把center内容拉出来，所以在外围box加上 padding:0 300px 0 。
        5. center内容拉回来了，right也跟着过来了，所以需要还原，设置left:-300px,right:-300px。
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

.left,
.right,
.center {
    float: left;
    position: relative;
}

.center {
    width: 100%;
}

.left {
    margin-left: -100%;
    left: -300px;
}

.right {
    margin-left: -300px;
    right: -300px;
}

.box {
    padding: 0 300px 0;
}

方法七：双飞翼布局

<div class="box">
        <div class="center">
            <div class="inner">
                1.center ，left， right 都float:left 
                2.将center占满 width:100% 
                3.此时center占满了，所以要把left拉到最左边，使用margin-left:-100% 同理 right使用margin-left:-300px （这时可以直接继续上边圣杯布局的步骤，也可以有所改动） 
                4.center内容被覆盖了吧，除了使用外围的padding，还可以考虑使用margin。给center增加一个内层div-- center-inner, 然后margin:0 300px 0
            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

.left,
.right,
.center {
    float: left;
}

.center {
    width: 100%;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -300px;
}

.inner {
    margin: 0 300px 0;
}

圣杯和双飞翼布局的区别
这俩者解决的问题都是一样的，都是两边定宽，中间自适应，且中间栏放在文档流前面渲染
相同点：
两者解决开始是一样的，都是让三栏float浮动，左右栏加上父margin让其与中间div并列。
不同点：
在于解决“中间栏内容不被遮挡”的思路
1. 圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div
2. 双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。