欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css橫排四張圖片

錢瀠龍2年前11瀏覽0評論

想在網頁中實現圖片橫行排列,可以使用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代碼即可。

上一篇Mysql++
下一篇css正版mod