Tôi đang cố gắng tạo ra một hệ thống menu với một hình ảnh và văn bản ở trên và dưới. Dữ liệu là động. Tôi muốn hệ thống menu xuất hiện sao cho mỗi hình ảnh có khoảng cách bằng nhau với hình ảnh khác nhau để chúng xếp thành một hàng lưới hình ảnh theo chiều ngang và chiều dọc.
Vấn đề là văn bản. Nếu văn bản dài hơn hình ảnh, thì div sẽ được phóng to. Tuy nhiên, sau đó nó tạo ra một khoảng cách nhìn vụng về vì các hình ảnh không còn cách đều nhau.
Để giải quyết vấn đề này, tôi nghĩ cách tiếp cận tốt nhất là để mỗi div khác sử dụng kích thước của div lớn hơn. Tuy nhiên, tôi không chắc chắn làm thế nào để làm điều này.
Tôi đã thử với flexbox bằng cách sử dụng flex-wraptài sản. Trong khi nó được gói gọn gàng, tôi không thể tìm ra cách để mỗi hình ảnh xếp thành khoảng cách bằng nhau với nhau.
Làm thế nào để tôi đạt được điều này?
Mã của tôi là như sau:
#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>Tái bút Tôi cũng không chắc tại sao divs phần của tôi lại tăng chiều cao. Vì vậy, bất kỳ cái nhìn sâu sắc về điều này cũng sẽ được đánh giá cao.
align-itemsđược thiết lập để stretchtheo mặc định. Bạn có thể dễ dàng thay đổi điều đó:align-items: flex-start;