css两张图片放在一行

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

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代码中加入这个容器,这样就可以实现两张图片在同一行的效果了。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两张图片放在一行

粉丝

0

关注

0

收藏

0

已有0次打赏