在網(wǎng)站開(kāi)發(fā)中，經(jīng)常會(huì)使用圖片來(lái)豐富頁(yè)面的視覺(jué)效果。而如果多張圖片需要并列展示，就需要使用 CSS 來(lái)設(shè)置它們的布局。

.image-container {
display: flex;
justify-content: space-between;
}
.image {
height: 200px;
width: 200px;
object-fit: cover;
}

首先，我們創(chuàng)建一個(gè)容器，代碼中使用的是.image-container，并將其設(shè)置為一個(gè)彈性盒模型，屬性為display: flex;。接下來(lái)，我們使用justify-content: space-between;來(lái)讓其中的三張圖片自動(dòng)分配等寬的空間，并在它們之間添加適當(dāng)?shù)木嚯x。

接下來(lái)，我們定義每張圖片的樣式。代碼中使用的是.image，并分別設(shè)置其高寬為 200px，并使用object-fit: cover;來(lái)調(diào)整圖片在容器中的占位方式。

最終的 HTML 代碼應(yīng)該類似于下面這樣：

<div class="image-container">
<img src="image1.jpg" alt="Image 1" class="image">
<img src="image2.jpg" alt="Image 2" class="image">
<img src="image3.jpg" alt="Image 3" class="image">
</div>

通過(guò)以上設(shè)置，這三張圖片就可以很好地呈現(xiàn)在一個(gè)容器中，并且自適應(yīng)不同大小的屏幕。