CSS中,可以使用以下兩種方法將兩個(gè)圖片水平放置:
1、使用CSS的display: inline-block;
屬性,將兩個(gè)圖片元素設(shè)置為內(nèi)聯(lián)塊級元素,它們就會(huì)水平排列。
<div> <img style="display: inline-block;" src="image1.png" /> <img style="display: inline-block;" src="image2.png" /> </div>
2、使用CSS的float: left;
屬性,將兩個(gè)圖片元素設(shè)置為左浮動(dòng),它們也會(huì)水平排列。
<div> <img style="float: left;" src="image1.png" /> <img style="float: left;" src="image2.png" /> </div>
注意,在使用float
屬性時(shí),可能需要清除浮動(dòng),以避免影響其他元素,可以通過添加一個(gè)新的元素并設(shè)置clear: both;
屬性來清除浮動(dòng)。
<div> <img style="float: left;" src="image1.png" /> <img style="float: left;" src="image2.png" /> <div style="clear: both;"></div> </div>
還可以使用CSS的flex
布局或grid
布局來實(shí)現(xiàn)更復(fù)雜的圖片排列需求。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請以鏈接形式注明文章出處。