如何将两个或多个元素并排放置并溢出？

Question

我想知道如何让两个或多个元素并排放置并溢出。如果我将幻灯片屏幕的宽度更改为 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;

}

Answer 1

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

Answer 2

我会为图像制作一个容器，并将宽度设置为两张图片的总和（再加一点），然后将其设置为显示内联块。现在您有 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>

如何将两个或多个元素并排放置并溢出？

How to put two or more Elements sit next to each other with overflow?

html

javascript

css

slide