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