html中图片一行四个 代码

在网页设计中，图片常常作为一个必要的元素出现在网页中。如何更好地布局图片是一个值得设计师关注的问题。下面介绍一种实现图片一行四个的HTML代码。

<style>
    .img-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .img-item {
        width: 23%;
    }
</style>

<div class="img-list">
    <div class="img-item">
        <img src="image1.jpg" alt="图片1">
    </div>
    <div class="img-item">
        <img src="image2.jpg" alt="图片2">
    </div>
    <div class="img-item">
        <img src="image3.jpg" alt="图片3">
    </div>
    <div class="img-item">
        <img src="image4.jpg" alt="图片4">
    </div>
    <div class="img-item">
        <img src="image5.jpg" alt="图片5">
    </div>
    <div class="img-item">
        <img src="image6.jpg" alt="图片6">
    </div>
    <div class="img-item">
        <img src="image7.jpg" alt="图片7">
    </div>
    <div class="img-item">
        <img src="image8.jpg" alt="图片8">
    </div>
</div>

在这个代码中，图片放在一个具有flex属性的div容器中。flex-wrap属性设为wrap，当容器宽度不够时，图片就会自动折行。justify-content属性设为space-between，使得图片之间的间距自动调整，符合布局需要。每个img项都放在一个具有宽度和边距的div中，以便更好地控制图片大小和间距。