CSS是前端開(kāi)發(fā)不可缺少的一部分，在頁(yè)面設(shè)計(jì)中有很多需要使用CSS來(lái)實(shí)現(xiàn)的功能。其中之一就是在一個(gè)元素中加入兩個(gè)不同的圖片，這可以使用CSS來(lái)實(shí)現(xiàn)。

img {
float: left;
margin-right: 10px;
}
img.second {
float: right;
margin-left: 10px;
}

我們可以先給第一個(gè)圖片元素添加一個(gè)float:left;，這樣它就會(huì)在父元素的左側(cè)浮動(dòng)，并且添加一個(gè)右邊距離為10px來(lái)和下一個(gè)元素隔開(kāi)。

接下來(lái)，我們?cè)贋榈诙€(gè)圖片元素添加一個(gè)class屬性名為second，并為其添加float:right;和一個(gè)左邊距離為10px即可，這樣第二個(gè)圖片元素就會(huì)在父元素的右側(cè)浮動(dòng)，并且與第一個(gè)圖片元素隔開(kāi)。

<div class="image-container">
<img src="first-image.jpg">
<img src="second-image.jpg" class="second">
</div>

最后只需要在父元素中添加兩個(gè)帶有src屬性的img元素即可，其中第二個(gè)img元素需要添加一個(gè)class屬性名為second，這樣就可以讓第二個(gè)圖片元素與第一個(gè)圖片元素產(chǎn)生不同的樣式效果了。