在CSS中,您可以通過使用display: inline-block
屬性來使圖片并排顯示,以下是一個示例:
HTML代碼:
<div> <img src="image1.jpg" style="display: inline-block;"> <img src="image2.jpg" style="display: inline-block;"> <img src="image3.jpg" style="display: inline-block;"> </div>
在這個示例中,我們創(chuàng)建了一個包含三張圖片的div
元素,我們?yōu)槊繌垐D片添加了style
屬性,并將其設(shè)置為display: inline-block
,這會使圖片像文本一樣排列在一行中,而不是像塊級元素那樣堆疊在一起。
您還可以使用CSS的float
屬性來使圖片并排顯示,以下是一個示例:
HTML代碼:
<div> <img src="image1.jpg" style="float: left;"> <img src="image2.jpg" style="float: right;"> <img src="image3.jpg" style="clear: both;"> </div>
在這個示例中,我們使用了float: left
和float: right
屬性來分別使***張和第二張圖片浮動到左側(cè)和右側(cè),我們使用clear: both
屬性來使第三張圖片清除前面的浮動,并將其放在下一行中。
無論您選擇使用display: inline-block
還是float
屬性,都可以使圖片并排顯示,您可以根據(jù)自己的需求選擇***適合的方法。