CSS可以幫我們控制網(wǎng)頁(yè)中的元素排版，其中一個(gè)常見(jiàn)的需求是讓圖片分行展示。下面我們就來(lái)介紹一下如何使用CSS讓圖片分行排列。

/*CSS代碼*/
.img-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.img-item {
width: 48%;
margin-bottom: 2%;
}
.img-item img {
width: 100%;
}

我們使用了flex布局，將.img-wrapper設(shè)置為flex容器。flex-wrap: wrap表示當(dāng)容器寬度不夠時(shí)可以換行，justify-content: space-between表示圖片在容器中左右對(duì)齊，align-items: center則是圖片在容器中垂直居中。

接下來(lái)，我們將每張圖片包裹在一個(gè).img-item的div中，并將其寬度設(shè)置為48%，即兩張圖片一行。同時(shí)為了防止圖片過(guò)于擁擠，我們?cè)?img-item中添加了margin-bottom: 2%。最后，為了讓圖片不超出容器，我們將img的寬度設(shè)置為100%。

這樣，通過(guò)CSS的控制，我們就實(shí)現(xiàn)了圖片兩行排列的效果。