css横排图片 |css lang

/* HTML代码 */
<div class="image-gallery">
<img src="img1.jpg" alt="image1">
<img src="img2.jpg" alt="image2">
<img src="img3.jpg" alt="image3">
<img src="img4.jpg" alt="image4">
</div>
/* CSS代码 */
.image-gallery {
display: flex; /* 使用flex布局 */
justify-content: space-between; /* 将图片间距平均分配 */
}
.image-gallery img {
width: 25%; /* 设置图片宽度为25% */
}

在HTML中，大家使用一个带有class为“image-gallery”的div包裹多个img标签。在CSS中，大家将该div的display属性设置为flex，使其成为一个伸缩盒子。然后，使用justify-content属性来设置每张图片之间的间距平均分配。最后，大家设置每张图片的宽度为25%。

通过这样的设置，大家就可以实现横排图片的效果了。如果需要增加或减少图片的数量，只需要在代码中添加或删除img标签即可。