我正在尝试创建一个菜单系统,上面和下面的图像和文本。数据是动态的。我希望菜单系统出现,以使每个图像彼此之间的距离相等,以便它们在水平和垂直图像网格中对齐。
问题是文本。如果文本比图像长,则div会放大。但是,由于图像不再彼此等距分布,因此会产生尴尬的外观间隙。
要解决此问题,我认为最好的方法是让其他每个div都采用较大div的大小。但是,我不确定该怎么做。
我已经尝试过使用flexbox使用该flex-wrap
属性。虽然包装得很好,但我还没有找到一种方法来使每个图像彼此等距对齐。
我该如何实现这一目标?
我的代码如下:
#outer {
display: flex;
}
#main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 20px;
}
.section {
background-color: #ddd;
padding: 15px;
}
.label, .icon {
text-align: center;
}
<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>
PS。我也不确定为什么我的分区div会增加其高度。因此,对此的任何见解也将不胜感激。
align-items
是stretch
默认设置。您可以轻松更改以下内容:align-items: flex-start;