CSS是一種用于網(wǎng)頁(yè)樣式設(shè)計(jì)的語(yǔ)言，它可以用來美化頁(yè)面效果，其中圖片的布局也是CSS設(shè)計(jì)的重點(diǎn)之一。一種常見的布局方式是將圖片豎兩排顯示，下面我們來看看如何使用CSS實(shí)現(xiàn)這種布局。

//HTML代碼
<div class="img-container">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
<img src="image6.jpg" alt="image6">
</div>
//CSS代碼
.img-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.img-container img {
max-width: 48%;
margin-bottom: 20px;
}

首先，在HTML代碼中我們將所有的圖片都放到一個(gè)div容器中，方便進(jìn)行整體布局的操作。接下來在CSS代碼中，我們用flex布局來進(jìn)行圖片的豎向排列，通過設(shè)置容器的flex-wrap屬性為wrap，讓圖片自動(dòng)換行顯示。同時(shí)，我們使用了justify-content屬性來實(shí)現(xiàn)圖片的左右之間的間隔。接著，對(duì)每個(gè)圖片設(shè)置了一個(gè)最大寬度，讓每張圖片的寬度在一定程度上適應(yīng)不同設(shè)備和屏幕大小。最后，通過設(shè)置每個(gè)圖片的外邊距為20px，使得圖片在豎向排列時(shí)之間有一定的間隔。

上面這段CSS代碼的核心就是使用了flex布局，而flex布局是CSS3中用來替代傳統(tǒng)布局方式的強(qiáng)大工具，可以將元素的排列方式完全按照設(shè)計(jì)者的意愿進(jìn)行分配和控制。

當(dāng)然，以上代碼只是一種實(shí)現(xiàn)豎排圖片布局的方式，實(shí)際上還有很多其他方式可以實(shí)現(xiàn)相同的效果。最終的布局效果也會(huì)受到不同瀏覽器、不同設(shè)備和不同屏幕大小的影響，因此，我們需要在設(shè)計(jì)時(shí)兼顧不同情況下的效果，以最優(yōu)的方式達(dá)到最佳的布局效果。