[分享]css两张图片怎么并排

在网页设计中，我们经常需要将两张图片并排显示，这样可以让页面布局更加美观、清晰。那么该如何实现呢？其实很简单，只需要使用CSS即可。 .imgcontainer { display: flex; ju...

在网页设计中，我们经常需要将两张图片并排显示，这样可以让页面布局更加美观、清晰。那么该如何实现呢？其实很简单，只需要使用CSS即可。

<style>
  .img-container {
    display: flex;
    justify-content: space-between;
  }
  .img-container img {
    width: 45%;
    height: auto;
  }
</style>

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

以上代码就是将两张图片并排显示的实现方式。首先，我们在样式表中设置了一个.img-container容器，并将它的display属性设为flex，表示该容器使用flex布局。然后，通过justify-content属性设置容器内元素的对齐方式，这里我们选择了space-between，表示让两张图片在容器内等间距排列。接下来，我们设置了.img-container img的样式，也就是说，我们设置了两张图片的大小，这里我们将它的宽度设为45%，高度设为自适应。最后，我们在容器中插入了两张图片，它们会按照我们在样式表中设置的方式并排显示。