[分享]css两张图片放在一行

CSS的强大之处在于可以控制网页的布局，其中包括图片的排列。在很多情况下，我们需要将两张图片放在同一行，下面就来介绍一下如何实现。 .imgbox{ display:flex; /设置弹性布局/ fl...

CSS的强大之处在于可以控制网页的布局，其中包括图片的排列。在很多情况下，我们需要将两张图片放在同一行，下面就来介绍一下如何实现。

 <style>
        .img-box{
            display:flex; /*设置弹性布局*/
            flex-wrap:nowrap; /*弹性容器不换行*/
            justify-content:space-between; /*两侧对齐*/
        }
        .img-box img{
            width:200px; /*设置图片宽度*/
            margin-right:10px; /*设置图片间距*/
        }
    </style> 

以上的代码中，我们首先创建了一个img-box类作为容器。这个容器使用了flex布局，并且设置了不换行，两侧对齐，并且使用了space-between属性来让图片之间保持一定的间距。

接着，我们在容器中加入两张图片，并且设置图片的宽度和间距。在这里，我们的图片是使用img标签加入的。

 <div class="img-box">
        <img src="image1.jpg" alt="image1">
        <img src="image2.jpg" alt="image2">
    </div> 

最后，在HTML代码中加入这个容器，这样就可以实现两张图片在同一行的效果了。