html - 动态 div 列位置

Question

我有一个页面，其中包含具有相同宽度和不同高度的其他页面的卡片。我需要将下一张卡片放在最小的当前列。我现在得到的：

.card {
  width: 50%;
  margin: 0;
  float: left;
  height: 32px;
}
.a { background-color: red; }
.b { background-color: yellow; height: 80px; }
.c { background-color: green; }
.d { background-color: blue; }
.e { background-color: gray; }

<div class="card a">a</div>
<div class="card b">b</div>
<div class="card c">c</div>
<div class="card d">d</div>
<div class="card e">e</div>

在这里我要实现的目标：“b”放在“a”旁边，因为第二列更小，然后“c”放在“a”下面，因为第一列更小，然后“d”放在下面“c”，因为第一列仍然更小，而“e”被放置在“b”下，因为第二列现在更小了。

_{注意：卡片的宽度是根据屏幕宽度动态设置的，所以解决方案应该是动态的，不能依赖列数（可能是1-4列）}

我搜索了很多，但一无所获；我试图申请flexbox这个，但似乎这个技术在这里无济于事。没有JS有可能吗？

我也见过 Masonry，但它处理更复杂的情况，不同宽度的元素。我的情况更简单，元素具有相同的宽度，所以我希望有一个 CSS 解决方案......

标签： htmlcssdynamicposition