今天我們來學習一下如何使用CSS讓3張圖片并排顯示。

HTML代碼如下：
<div class="container">
<img src="img1.jpg" alt="圖片1" class="img">
<img src="img2.jpg" alt="圖片2" class="img">
<img src="img3.jpg" alt="圖片3" class="img">
</div>
CSS代碼如下：
.container {
display: flex;
justify-content: space-between;
}
.img {
width: 30%;
}

通過上面的HTML代碼，我們創建了一個包含3張圖片的div容器，并為每張圖片定義了一個類名為“img”。接下來，我們來看看CSS代碼。

首先，我們為容器添加了一個display屬性并將其值設置為flex。這樣，我們就可以使用flexbox布局來控制子元素的排列方式。

接下來，我們使用justify-content屬性來指定每個圖片之間的間距。在本例中，我們設置它的值為space-between，這樣就會在每個圖片之間生成等距的空間。

最后，我們為每張圖片定義了一個寬度值，以便它們可以適應屏幕寬度的變化。在這個例子中，我們將寬度設置為了30%。

這就是創建3張圖片并排顯示的全部過程。希望這篇文章能夠對你有所幫助。