我正在尝试使两个图像并排浮动

Question

body {
  width: 100%;
  max-width: 1200px;
  margin-right: 2px;
  margin-left: 2px;
}

.fruit {
  width: 1200px;
  max-height: 39em;
}

img {
  float: left;
}

<div class="fruit">

  <img src="images/OrangesPinkBackground.jpg" alt=" " width="600px" />

  <img src="images/GrapefruitPinkBackground.jpg" alt=" " width="600px" />

</div>

我尝试了很多我可以想到的不同事情，而它们只是一直这样结束

也许我的身体造型有问题？因为滚动条所在的右侧有很多空白。我试图将两张图像均匀地分开，以便它们各自占据屏幕的一半，并且也仅向下延伸约40em。不知何故我只是不能让他们正确的阵容。

这时我会提出任何建议。

Answer 1

<div class="fruit">
  <div class="fruit-img"> 
     <img src="images/OrangesPinkBackground.jpg" alt=" "/>
  </div>
  <div class="fruit-img">
     <img src="images/GrapefruitPinkBackground.jpg" alt=" "/>
  </div>

</div>

在您的父级水果课程中：

.fruit{
display: flex;
align-items:center;
height: 39em;
width: 100%;
}

在您的孩子水果类中，每个图像都充当容器

.fruit-img{
height: 100%;
flex-basis: 50%;
}

这是您实际的图像类

.fruit-img img{
width: 100%;
height: 100%:
}

Answer 2

您可以使用flexbox。比使用float更容易。

将flex用于：

justify-content: space-between

使图像在屏幕的每一侧末端对齐