在CSS中,我們可以使用浮動和盒模型的特性來實現圖片的上下或者左右并排。
<div class="container"> <img src="image1.jpg" class="left"> <p>這是左邊的圖片</p> <img src="image2.jpg" class="right"> <p>這是右邊的圖片</p> </div> .container { overflow: auto; } .left { float: left; margin-right: 10px; } .right { float: right; margin-left: 10px; }
這里我們將兩張圖片放到一個容器里面,并且分別加上左浮動和右浮動。為了防止容器不能完全包含兩張圖片,我們給容器加上了overflow: auto;屬性。
同時還需要注意的是,我們給左邊的圖片加上了margin-right,給右邊的圖片加上了margin-left,這樣可以讓圖片之間產生一定的間隔。
上一篇css圖片上放上一個圖片
下一篇css圖片上編寫文字