今天我們來學(xué)習(xí)一下如何使用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代碼，我們創(chuàng)建了一個包含3張圖片的div容器，并為每張圖片定義了一個類名為“img”。接下來，我們來看看CSS代碼。

首先，我們?yōu)槿萜魈砑恿艘粋€display屬性并將其值設(shè)置為flex。這樣，我們就可以使用flexbox布局來控制子元素的排列方式。

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

最后，我們?yōu)槊繌垐D片定義了一個寬度值，以便它們可以適應(yīng)屏幕寬度的變化。在這個例子中，我們將寬度設(shè)置為了30%。

這就是創(chuàng)建3張圖片并排顯示的全部過程。希望這篇文章能夠?qū)δ阌兴鶐椭?/p>