一个css布局问题?

作者站长头像
站长
· 阅读数 4
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    </head>
    <body>
        <style>
            .box {
                background-color: blue;
                width: 300px;
                margin: .5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 30px;
            }

            .box-1 {
                height: 200px;
            }

            .box-2 {
                height: 500px;
            }

            .box-3 {
                height: 500px;
            }

            .box-4 {
                height: 200px;
            }
        </style>
        <div class="box box-1">1</div>
        <div class="box box-2">2</div>
        <div class="box box-3">3</div>
        <div class="box box-4">4</div>
    </body>
</html>

如何通过修改box布局方式, 实现下图效果?

一个css布局问题?

回复
1个回答
avatar
test
2024-07-06

应该可以使用 CSS 瀑布流来实现，具体可以参考我的这篇笔记 👉 纯CSS实现瀑布流布局

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容