CSS可以同時顯示兩張圖片的方法

在CSS中，我們可以使用display: flex或者float: left屬性來實(shí)現(xiàn)同時顯示兩張圖片，下面我們將分別介紹這兩種方法。

方法一：使用display: flex

我們可以將兩個圖片元素放入一個父元素中，然后給父元素設(shè)置display: flex屬性，這樣，兩個圖片元素就會水平排列，共同顯示在父元素中。

<div style="display: flex;">
  <img src="image1.png" alt="圖片1">
  <img src="image2.png" alt="圖片2">
</div>

方法二：使用float: left

我們可以將兩個圖片元素分別設(shè)置float: left屬性，這樣兩個圖片元素也會水平排列，但是它們會緊挨著顯示，沒有間隔。

<img style="float: left;" src="image1.png" alt="圖片1">
<img style="float: left;" src="image2.png" alt="圖片2">

清除浮動

需要注意的是，使用float: left后，可能會影響到其他元素的布局，我們需要在合適的位置添加清除浮動的元素或者設(shè)置父元素的clear: both屬性來清除浮動的影響。

<div style="clear: both;"></div>

或者，我們可以使用偽元素來清除浮動：

<div style="overflow: auto;">
  <img style="float: left;" src="image1.png" alt="圖片1">
  <img style="float: left;" src="image2.png" alt="圖片2">
  <div style="clear: both;"></div>
</div>

通過以上方法，我們可以實(shí)現(xiàn)CSS中同時顯示兩張圖片的需求。