我有固定高度的容器(蓝色),该容器应彼此相邻显示。每个容器将具有不同数量的盒子(绿色),应按列订购,例如像这样:
我尝试了以下代码:
.container {
height: 300px;
background-color: blue;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
}
.box {
width: 50px;
height: 50px;
background-color: green;
margin: 2px;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
相反,它看起来像这样:
我的问题是,容器仅包含第一行,而不包含其他行-因此第二个容器位于错误的位置。该如何解决?