css 三栏布局

1、浮动（margin/BFC）

左右浮动，之间不浮动，中间栏放到文档流后面
什么是 BFC （什么是 BFC_XianXiaoM的博客-CSDN博客）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 浮动 + margin/BFC */
    .container {
        width: 100%;
        height: 500px;
    }

    .container .left {
        width: 200px;
        height: 100%;
        float: left;
        background-color: rgb(103, 167, 78);
    }

    .container .center {
        height: 100%;
        background-color: rgb(147, 147, 206);
        margin: 0 200px; /* margin */
        overflow: hidden; /* BFC */
    }

    .container .right {
        width: 200px;
        height: 100%;
        float: right;
        background-color: rgb(171, 223, 223);
    }

</style>

<body>
    <div class="container">
        <div class="left">#left</div>
        <div class="right">#right</div>
        <div class="center">#center</div>
    </div>
</body>

</html>

2、flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* flex */
    .container {
        display: flex;
        width: 100%;
        height: 500px;
    }

    .container .left {
        width: 200px;
        height: 100%;
        background-color: antiquewhite;
    }

    .container .center {
        height: 100%;
        background-color: blue;
        flex: 1;
    }

    .container .right {
        width: 200px;
        height: 100%;
        background-color: aqua;
    }

    /* flex table */
    /* .container {
        display: table;
        width: 100%;
        height: 500px;
    }

    .container .left {
        height: 100%;
        display: table-cell;
        background-color: antiquewhite;
    }

    .container .center {
        height: 100%;
        background-color: blue;
        display: table-cell;
    }

    .container .right {
        height: 100%;
        display: table-cell;
        background-color: aqua;
    } */
</style>

<body>
    <div class="container">
        <div class="left">#left</div>
        <div class="center">#center</div>
        <div class="right">#right</div>
    </div>
</body>

</html>

3、定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 定位 */
    .container {
        width: 100%;
        height: 500px;
        position: relative;
    }

    .container .left {
        width: 200px;
        height: 100%;
        background-color: antiquewhite;
        position: absolute;
        left: 0;
    }

    .container .center {
        height: 100%;
        background-color: blue;
        position: absolute;
        left: 200px;
        right: 200px;
    }

    .container .right {
        width: 200px;
        height: 100%;
        background-color: aqua;
        position: absolute;
        right: 0;
    }
</style>

<body>
    <div class="container">
        <div class="left">#left</div>
        <div class="center">#center</div>
        <div class="right">#right</div>
    </div>
</body>

</html>

圣杯布局与双飞翼布局的实现思路（把中间栏放在文档流前面，以优先渲染）

1、给 center、left、right 加左浮动 float：left; 且 center 宽度为100%

2、要把 left 往上提，此时可以给 left 设置 margin-left 值为 center 的宽度来使 left 上移，提升到上一层。同样给 right 设置 margin-left 值为 right 本身的宽度，来使 right 提升到上一层。

3、此时 center 元素的子元素被遮挡了，此时我们可以给父元素 container 设置 padding-left 为 left 元素的宽度，设置 padding-right 为 right 元素的宽度，这样就可以确保center 宽度还是100%的情况下子元素也不会被遮挡。（圣杯布局）

4、为了中间 center 不被遮挡，直接在 center 外建立一个 div 用于放置内容，在子 div 中设置 margin-left 和 margin-right 属性为左右两栏 div 留出位置。（双飞翼布局）

4、圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 圣杯布局: 中间栏放到文档流前面 */
    .container {
        height: 500px;
        margin: 0 200px;
    }

    .container .center {
        width: 100%;
        height: inherit;
        float: left;
        background-color: red;
    }

    .container .left {
        width: 200px;
        height: inherit;
        float: left;
        background-color: darkgray;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .container .right {
        width: 200px;
        height: inherit;
        float: left;
        background-color: dimgray;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
</style>

<body>
    <div class="container">
        <div class="center">#center</div>
        <div class="left">#left</div>
        <div class="right">#right</div>
    </div>
</body>

</html>

5、双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 双飞翼 */
    .container {
        float: left;
        width: 100%;
        height: 200px;
    }

    .center {
        background-color: red;
        height: inherit;
        margin: 0 200px;
    }

    .left {
        width: 200px;
        background-color: darkgray;
        height: 200px;
        float: left;
        margin-left: -100%;
    }


    .right {
        width: 200px;
        background-color: dimgray;
        height: 200px;
        float: left;
        margin-left: -200px;
    }
</style>

<body>
    <div class="container">
        <div class="center">#center</div>
    </div>
    <div class="left">#left</div>
    <div class="right">#right</div>
</body>

</html>

扫描二维码关注公众号，回复： 17288625 查看本文章

猜你喜欢