在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常需要顯示多張圖片。如果每張圖片都單獨(dú)使用img標(biāo)簽，那么頁(yè)面會(huì)變得十分混亂。此時(shí)，就可以使用CSS來(lái)實(shí)現(xiàn)多行圖片的顯示。

//html代碼
<div class="img-container">
<img src="圖片1.jpg">
<img src="圖片2.jpg">
<img src="圖片3.jpg">
<img src="圖片4.jpg">
<img src="圖片5.jpg">
<img src="圖片6.jpg">
</div>
//CSS代碼
.img-container{
display: flex;  //設(shè)置容器為彈性盒子
flex-wrap: wrap; //設(shè)置彈性盒子為多行布局
}
.img-container img{
width: 200px; //設(shè)置每張圖片的寬度
margin: 10px;  //設(shè)置圖片之間的距離
}

在上述代碼中，首先使用一個(gè)div標(biāo)簽作為圖片容器。在CSS中，為該容器設(shè)置了彈性布局，并且允許圖片在多行上顯示。接著，對(duì)每張圖片進(jìn)行樣式設(shè)置，包括圖片的寬度和圖片之間的距離。

這樣一來(lái)，只需把所需要的圖片放在img標(biāo)簽中，就能夠?qū)崿F(xiàn)多行圖片的顯示。而且，在瀏覽器窗口大小改變的時(shí)候，圖片的布局也會(huì)自動(dòng)調(diào)整，不會(huì)出現(xiàn)錯(cuò)位或溢出的情況。