实现3个盒子自动换行

最新推荐文章于 2023-11-05 19:54:30 发布

一只楊

最新推荐文章于 2023-11-05 19:54:30 发布

阅读量1k

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_67833657/article/details/126834390

版权

 <style>
        /* 在这里写样式的答案 */
        * {
            margin: 0;
            padding: 0;
        }

        .layout {
            display: flex;
            /* 自动换行 */
            flex-wrap: wrap;
            border: 1px solid #000
        }

        .box {
            /* 考虑到border 设置盒子模型 */
            line-height: 50px;
            margin: 5px 5px 5px 5px;
            width: calc((100% - 32px) / 3);
            height: 100px;
            background-color: rgb(5, 196, 187);
        }

        .box:nth-child(3n) {
            margin-right: 0;
        }

        .box:nth-child(3n) {
            background-color: rgb(123, 196, 5);
        }

        .box:nth-child(5n) {
            background-color: rgb(196, 174, 5);
        }

        .box:nth-child(7n) {
            background-color: rgb(196, 5, 101);
        }

        .box:nth-child(8n) {
            background-color: rgb(196, 5, 18);
        }

        .box:nth-child(1) {
            background-color: rgb(5, 107, 196);
        }
    </style>
</head>

<body>
    <div class="layout">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
    </div>
</body>

效果如下