我正在使仪表板布局，每个块项目应该水平对齐，并相互堆叠。我的问题是，我希望新行中的块直接堆叠在它上面的块下面，但目前它不像图中所示的那样

像上面一样，我想要块“F”直接在块“A”下面，类似地，块“G”直接在块“B”和“C”下面，但目前它们留下了很多空间，因为块“E”的高度最长。

这里是我的代码:

:root { --p: 20px; --w1: 274px; --w2: calc(var(--w1) * 2 + (var(--p) * (2 - 1))); --w3: calc(var(--w1) * 3 + (var(--p) * (3 - 1))); --w4: calc(var(--w1) * 4 + (var(--p) * (4 - 1))); --h1: 100px; --h2: calc(var(--h1) * 2 + (var(--p) * (2 - 1))); --h3: calc(var(--h1) * 3 + (var(--p) * (3 - 1))); --h4: calc(var(--h1) * 4 + (var(--p) * (4 - 1))); --h5: calc(var(--h1) * 5 + (var(--p) * (5 - 1))); --dashboard_bg: #FFF; } html, body { height: ; background: #BFCCD6; } #dashboard_layout { width: ; height: ; background: #BFCCD6; padding-top: var(--p); } p.dashboard_title { font-weight: bold; font-size: 20px; } .widget { border-radius: 5px; background: var(--dashboard_bg); margin: var(--p); } .widget:not(:first-child) { /*margin: var(--p);*/ } .w1 { width: var(--w1); } .w2 { width: var(--w2); } .w3 { width: var(--w3); } .w4 { width: var(--w4); } .h1 { height: var(--h1); } .h2 { height: var(--h2); } .h3 { height: var(--h3); } .h4 { height: var(--h4); } .h5 { height: var(--h5); } .dashboard_content { display: flex; justify-content: space-between; padding: 15px; } .dashboard_flex .widget { float: left; display: flex; align-items: center; justify-content: center; } <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script> <div id="dashboard_layout"> <p class="dashboard_title">Widget Height</p> <div class="dashboard_flex"> <div class="widget w1 h1">A</div> <div class="widget w1 h2">B</div> <div class="widget w1 h3">C</div> <div class="widget w1 h4">D</div> <div class="widget w1 h5">E</div> <div class="widget w1 h3">F</div> <div class="widget w2 h2">G</div> </div> </div>

我有什么办法可以做到这一点吗？谢谢

顺晟科技：