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

Posted 2023-03-21

【中文标题】如何将两个或多个元素并排放置并溢出？

【英文标题】：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;

【参考方案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>