我正在尝试排列一组看起来像这样的 div：
<div class="productionList">
<div>
<img>
<progress>
</div>
</div>
在较大的 div 内 (.ProductionList) 但无论我怎么尝试，他们都会得到自己的台词：
[图片]
[进展]
[图片]
[进展]
...
虽然我希望它看起来像这样：
[---img--][---img--][---img--][---img--][---img--][---img--]..
[进度][进度][进度][进度][进度][进度]...
（到达容器末端后包裹）
[---img--][---img--]
[进展][进展]
这就是我的 CSS 代码的样子：
.productionList {
border: 1px solid white;
width: 100%;
}
.productionList div {
width: 40px;
}
.productionList div img {
width: 100%;
}
.productionList div progress {
width: 100%;
}
知道发生了什么事或如何解决这个问题吗？
用于繁殖
<style>
.productionList {
border: 1px solid white;
width: 100%;
}
.productionList div {
width: 40px;
}
.productionList div img {
width: 100%;
}
.productionList div progress {
width: 100%;
}
</style>
<div class="productionList">
<div>
<img>
<progress>
</div>
<div>
<img>
<progress>
</div>
<div>
<img>
<progress>
</div>
</div>
要使
<div>.productionList .productionList {
border: 1px solid white;
width: 100%;
/* Use Flex */
display: flex;
flex-wrap: wrap;
}
.productionList div {
width: 40px;
}
.productionList div img {
width: 100%;
}
.productionList div progress {
width: 100%;<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="productionList">
<div>
<img>
<progress>
</div>
<div>
<img>
<progress>
</div>
<div>
<img>
<progress>
</div>
</div>
</body>
</html>