CSS中同時(shí)顯示兩張圖片的方法

在CSS中，我們可以使用display: flex或者float: left來實(shí)現(xiàn)兩張圖片同時(shí)顯示。

使用display: flex的方法：

HTML代碼：

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

CSS代碼：

.image-container {
  display: flex;
  justify-content: space-between;
}

這種方法會(huì)將兩張圖片水平排列，并且圖片之間有一定的間隔。

使用float: left的方法：

HTML代碼：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1" style="float: left; margin-right: 10px;">
  <img src="image2.jpg" alt="Image 2" style="float: left; margin-right: 10px;">
</div>

這種方法也會(huì)將兩張圖片水平排列，但是圖片之間沒有間隔，可以通過設(shè)置margin-right來增加間隔。

需要注意的是，使用float: left時(shí)，需要確保圖片的尺寸不會(huì)超出容器的寬度，否則可能會(huì)導(dǎo)致圖片重疊或者無(wú)法正確顯示，還需要注意圖片的加載順序，確保兩張圖片都能正確加載后再進(jìn)行顯示。