【CSS】CSS 布局——常规流布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了【CSS】CSS 布局——常规流布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

三栏布局：左右定宽，中间自适应。

左右浮动，中间自适应

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

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box div {
            height: 100vh;
        }

        .left {
            width: 300px;
            float: left;
            background: rgb(202, 233, 91);
        }

        .right {
            width: 300px;
            float: right;
            background: rgb(213, 125, 237);
        }

        .center {
            background-color: rgb(96, 232, 175);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>
</body>

</html>

绝对定位

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

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box div {
        height: 100vh;
    }

    .left {
        width: 300px;
        position: absolute;
        left: 0;
        background: rgb(239, 106, 106);
    }

    .right {
        width: 300px;
        position: absolute;
        right: 0;
        background: rgb(104, 229, 189);
    }

    .center {
        position: absolute;
        left: 300px;
        right: 300px;
        background-color: rgb(195, 240, 105);
    }
</style>
</head>

<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>

</html>

【CSS】CSS 布局——常规流布局,CSS,css,前端文章来源地址https://www.toymoban.com/news/detail-650112.html

flexbox布局

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

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box div {
        height: 100vh;
    }

    .box {
        display: flex;
    }

    .left {
        width: 300px;
        background: rgb(232, 110, 110);
    }

    .right {
        width: 300px;
        background: rgb(172, 223, 101);
    }

    .center {
        flex: 1;
        background-color: rgb(156, 103, 236);
    }
</style>
</head>

<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">center</div>

        <div class="right">right</div>
    </div>
</body>

</html>