[分享]css中如何让两张图片并排显示

CSS中如何让两张图片并排显示呢？下面我们来讲解一下。.img{ float: left; /让图片左浮动/ marginright: 10px; /让两张图片之间相隔10个像素/ } 首先，我们需要...

CSS中如何让两张图片并排显示呢？下面我们来讲解一下。

.img{
    float: left;   /*让图片左浮动*/
    margin-right: 10px;   /*让两张图片之间相隔10个像素*/
} 

首先，我们需要将图片都包裹在一个div或其他容器中，然后给每张图片添加样式类“img”，代码如下：

<div class="container">
    <img src="img1.jpg" class="img">
    <img src="img2.jpg" class="img">
</div> 

接下来，我们通过设置样式类“img”的属性，让图片左浮动，即向左对齐，并且在图片之间添加10px的外边距，代码如下：

.container{
    overflow: hidden;   /*清除浮动*/
} 

最后，为了防止浮动元素影响周围元素的布局，我们需要在图片的容器中添加一个清除浮动的样式，代码如下：

.container{
    overflow: hidden;   /*清除浮动*/
} 

当我们完成以上三步后，两张图片就能够并排显示了。需要注意的是，这种方法只适用于图片水平排列较少的情况，如果图片比较多，建议使用flex布局或者栅格布局等方法来实现。