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

【问题标题】：How to put two or more Elements sit next to each other with overflow?如何将两个或多个元素并排放置并溢出？
【发布时间】：2021-08-23 13:52:34
【问题描述】：

我想知道如何将两个或多个元素并排放置并溢出。如果我改变滑动屏幕的宽度，例如 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;

}

【问题讨论】：

标签： javascript html css slide

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：