在網頁設計中,經常需要三張圖片并列展示。這時候,我們可以使用css來實現。
<style> .img-container{ width: 100%; } .img{ width: 30%; margin: 0 0.5%; display: inline-block; } </style> <div class="img-container"> <img src="img1.jpg" alt="圖片1" class="img"> <img src="img2.jpg" alt="圖片2" class="img"> <img src="img3.jpg" alt="圖片3" class="img"> </div>
以上代碼中,我們定義了一個class名為img-container的容器,用來包裹三張圖片。然后,我們定義了一個class名為img的樣式,用來控制圖片的寬度、外邊距和水平排列方式。
在img-container中,我們分別插入了三張圖片,分別為img1.jpg、img2.jpg和img3.jpg,其中每張圖片的class都為img。
有了以上代碼,三張圖片就可以輕松實現并列展示了。