CSS可以通過調整元素的寬度、浮動、清除浮動等方法實現讓圖片換行。

// HTML
<div class="image-container">
<img src="image.jpg">
<img src="image.jpg">
<img src="image.jpg">
</div>
// CSS
.image-container {
width: 100%;
}
.image-container img {
width: 33.33%; /* 三張圖片等分父元素的寬度 */
float: left; /* 讓圖片左浮動 */
}
.clearfix::after {
content: "";
display: table;
clear: both; /* 清除浮動 */
}

如果圖片不等寬，需要通過一些處理使它們居中顯示，并且讓每行顯示的圖片數量始終相同。

// HTML
<div class="image-container">
<div class="image-wrap">
<img src="image1.jpg">
</div>
<div class="image-wrap">
<img src="image2.jpg">
</div>
<div class="image-wrap">
<img src="image3.jpg">
</div>
<div class="image-wrap">
<img src="image4.jpg">
</div>
<div class="image-wrap">
<img src="image5.jpg">
</div>
</div>
// CSS
.image-container {
display: flex;
flex-wrap: wrap; /* 讓圖片換行 */
justify-content: center; /* 讓圖片居中 */
}
.image-wrap {
width: 33.33%; /* 三張圖片等分父元素的寬度 */
box-sizing: border-box;
padding: 10px;
text-align: center;
}
.image-wrap img {
max-width: 100%; /* 圖片最大寬度為容器寬度 */
vertical-align: middle; /* 讓圖片垂直居中 */
}