我试图制作多行正方形(每行3个),它们具有相同的高度.
我为此编写了一些HTML和CSS,但这些方块都在同一行.
这是我到目前为止所拥有的:
#list-wrapper {
display: flex;
width: 100%;
}
#list-wrapper div {
width: 33.33%;
}
#list-wrapper div img {
flex: 1;
}Run Code Online (Sandbox Code Playgroud)
<div id="list-wrapper">
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
</div>Run Code Online (Sandbox Code Playgroud)
当我加载页面时,显示所有框,但它们都在一行上超过父div的100%宽度.
任何帮助深表感谢.