想在網頁中實現圖片橫行排列,可以使用CSS。以下是一種實現方法:
.img-container { display: flex; } .img-box { width: 25%; margin-right: 10px; } .img-box:last-child { margin-right: 0; } .img { width: 100%; }
上面的代碼定義了一個容器,容器內的元素使用flex布局。元素內有四個圖片占據寬度的四分之一,左右間隔為10px。其中最后一個元素需要取消右邊距。
接下來是HTML代碼:
<div class="img-container"> <div class="img-box"> <img src="img1.jpeg" alt="圖片1" class="img"> </div> <div class="img-box"> <img src="img2.jpeg" alt="圖片2" class="img"> </div> <div class="img-box"> <img src="img3.jpeg" alt="圖片3" class="img"> </div> <div class="img-box"> <img src="img4.jpeg" alt="圖片4" class="img"> </div> </div>
以上代碼中,img-container為容器,img-box為每個圖片盒子,img為圖片元素。
通過上述CSS代碼和HTML代碼的配合,可以輕松地實現四張圖片的橫行排列。在進行大小調整或添加圖片數量時,只需要簡單修改CSS或HTML代碼即可。