如何将两个或多个元素放在一起并溢出？

如何解决如何将两个或多个元素放在一起并溢出？

我想知道如何将两个或多个元素放在一起并溢出。如果我将幻灯片屏幕的宽度更改为 1500 像素或更大，我就可以做到。我需要隐藏第二张图片以便稍后使用 javascript 制作幻灯片。请教我如何解决这个问题或教我另一种方法，如果有的话...

HTML

    <div class='slide-screen'>
  <div class='image' id='one'></div>
  <div class='image' id='two'></div>
</div>

CSS

.slide-screen{
  border:2px solid red;
  height:500px;
  width:700px;
  overflow-x:scroll;
}

.image{
  display:inline-block;
}

#one{
  float:left;
  height:500px;
  width:700px;
 background-image: url('https://images.unsplash.com/photo-1621361950750-21eba89575de?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjk0MzY0OA&ixlib=rb-1.2.1&q=85');
  background-size:cover;
}

#two{
  float:right;
  height:500px;
  width:700px;
 background-image: url('https://images.unsplash.com/photo-1621361950750-21eba89575de?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjk0MzY0OA&ixlib=rb-1.2.1&q=85');
  background-size:cover;

}

解决方法

您可以使用 max-width css 属性，它会在图像达到一定宽度时隐藏图像。

,

我会为图像制作一个容器，并将宽度设置为两张图片的总量（再加一点），然后将其设置为显示内联块。现在你有 2 张图像并排。然后你是外部容器，你可以设置溢出来滚动。看这里：

.slide-screen{
  border:2px solid red;
  height:500px;
  width:700px;
  overflow-x:scroll;
}

.container {
  display: inline-block;
  width: 1410px;
}
.image{
  display:inline-block;
}

#one{
  height:500px;
  width:700px;
 background-image: url('https://images.unsplash.com/photo-1621361950750-21eba89575de?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjk0MzY0OA&ixlib=rb-1.2.1&q=85');
  background-size:cover;
}

#two{
  height:500px;
  width:700px;
 background-image: url('https://images.unsplash.com/photo-1621361950750-21eba89575de?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjk0MzY0OA&ixlib=rb-1.2.1&q=85');
  background-size:cover;

}

<div class='slide-screen'>
  <div class="container">
    <div class='image' id='one'></div>
    <div class='image' id='two'></div>
  </div>
</div>