css将两张图片放在一起

CSS是一种可以让我们美化网页的工具。我们可以使用CSS来放置和布局不同元素，在这篇文章中，我们将学习如何在HTML文件中使用CSS将两张图片放置在一起。

  
    .container {
      display: flex;
      justify-content: space-between;
    }

    .image {
      width: 50%;
    }
  

首先，我们需要在HTML文件中创建一个父元素，这个元素将用于包含两个子元素（也就是我们的图片）。在这个例子中，我们将使用class为“container”的div元素来实现这一目的：

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

我们使用了两张名字为“image1.jpg”和“image2.jpg”的图片，并且给它们都添加了一个class名为“image”，这将帮助我们轻松地操作这些图片的样式。现在，我们需要在CSS中添加我们的样式规则。

我们将使用display:flex属性来定义一个flex容器，其中的子元素将使用space-between属性来水平排列，这将确保两个图像之间有间隔。我们还将将图像的宽度设置为50％，以确保它们占据父元素的相等空间。

下面是完整的代码：

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

    .container {
      display: flex;
      justify-content: space-between;
    }

    .image {
      width: 50%;
    }
  

现在，我们已经成功地将两张图片放置在一起了！