html - 横向缩小屏幕时，如何防止同一行的图像移动到不同的行？

Question

#div {}

img {
  height: 200px;
}

#img1 {
  float: left;
}

#img2 {
  float: right;
}

#img3 {
  float: right;
}

<div id="div">

  <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">

  <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">

  <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">

</div>

目前，当您水平缩小屏幕时，图像开始垂直堆叠，这是我不想要的，我希望它们都保持在同一条水平线上。

我正在寻找如何做以下事情:

1. 当图像开始与另一幅图像重叠时，使图像消失。

2. 当图像开始重叠时，将图像向右推过垂直滚动条。

我要求两者的原因是因为我现在有两个元素，每个元素都需要这两个元素之一，但我不知道该怎么做 :P

如果可能的话，我还想避免使用@media only screen and (max-width: ---px)。

Answer 1

您需要为每个图像添加单独的div，并通过display: flex 元素排列。还可以使用 margin 对齐 flex div 中的内容。

#div {
  display: flex;
}

.new {
  max-height: 200px;
}

.left {
  margin-right: auto;
}

img {
  max-width: 100%;
  max-height: 200px;
}

@media (max-width: 768px) {
.hidden-xs {
  display:none;
}
}

<div id="div">

  <div class="new left">
    <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
  </div>

  <div class="new hidden-xs">
    <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
  </div>

  <div class="new">
    <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
  </div>

</div>