css中怎么让两个图片在一行显示

许多网页设计者在布局时常常遇到一个问题：如何让两个图片在同一行显示？

其实，CSS技术可以很轻松地解决这个问题。下面就来介绍两种方法：

方法一：
<style>
    img{
        float: left;
        margin-right: 10px;
    }
</style>
<div>
    <img src="img1.jpg" />
    <img src="img2.jpg" />
</div> 

这种方法利用了浮动和外边距的特性。首先将两张图片都浮动在左侧，再在第一张图片的右边设置一个外边距即可。

方法二：
<style>
    .container{
        display: flex;
    }
</style>
<div class="container">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
</div> 

这种方法利用了CSS3中的弹性盒子布局。将两张图片放在一个包含块内，并将包含块设置为弹性盒子容器，即可实现两张图片在同一行显示。

无论是哪种方法，都可以轻松地让两个图片在同一行显示。在实际开发中，更多的是根据具体情况灵活使用不同的方法。