实现三栏布局的三种方法

最新推荐文章于 2025-01-20 16:28:30 发布

hqin_520

最新推荐文章于 2025-01-20 16:28:30 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记 css

本文链接：https://blog.csdn.net/hqin_520/article/details/115674427

笔记同时被 2 个专栏收录

28 篇文章

订阅专栏

css

5 篇文章

订阅专栏

前言：现成的组件用多了，突然让你用css实现一个三栏布局你可以吗？

要求：
在这里插入图片描述
我这里想到了三种方法，有其他方法欢迎补充

<!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>三栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 法一 */
        .box {
            display: grid;
            grid-template-columns: repeat(auto-fit, calc((100% - 16px) / 3));
            /* 这里重复多少次是一个变量，要显示的数length/3 */
            grid-template-rows: repeat(4, 100px); 
            /* grid-row-gap: 8px;
            grid-gap: 8px; */
            gap: 8px;
            width: 100%;
        }
        .test {
            border: 2px solid blue;
            background-color: #e5e5e5;
        }

        /* 法二 */
        /* .box {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .test {
            border: 2px solid red;
            height: 100px;
            width: calc((100% - 28px) / 3);
            margin-bottom: 8px;
        } */

        /* 法三 */
        /* .box {
            width: 100%;
        }
        .test {
            border: 2px solid red;
            height: 100px;
            width: calc((100% - 28px) / 3);
            margin-bottom: 8px;
            margin-right: 8px;
            float: left;
        }
        .box>div:nth-child(3n){
            margin-right: 0px ;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>

    </div>
</body>

</html>

参考资料链接：
display:grid：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
display:flex：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html