在CSS中,我們可以使用display: inline-block;
屬性將兩個(gè)圖片元素并排顯示,以下是一個(gè)簡(jiǎn)單的示例:
<div style="width: 500px; height: 300px; background-color: #f0f0f0; display: flex; justify-content: space-between;"> <img src="image1.jpg" style="width: 250px; height: 300px; object-fit: cover;" /> <img src="image2.jpg" style="width: 250px; height: 300px; object-fit: cover;" /> </div>
在這個(gè)示例中,我們創(chuàng)建了一個(gè)包含兩個(gè)圖片的div
元素,通過(guò)設(shè)置display: flex;
和justify-content: space-between;
,我們使得兩個(gè)圖片元素能夠并排顯示,并且圖片之間有一定的間隔,我們還設(shè)置了圖片的寬度和高度,以及使用object-fit: cover;
來(lái)確保圖片能夠完全覆蓋其容器,而不被拉伸或壓縮。
這只是一個(gè)簡(jiǎn)單的示例,實(shí)際使用時(shí)可能需要根據(jù)具體需求進(jìn)行調(diào)整,如果圖片的尺寸或形狀不同,可能需要使用其他方法來(lái)確保它們能夠正確地并排顯示。