所有图像内联溢出

Question

第一个容器很好，你可以看到2个图像，有6个溢出的图像。 （垂直）

Container2问题，我想制作带溢出的水平图像列表（只有x /水平）。

我的css到目前为止：

#container {
  display: block;
  width: 80%;
  height: 40vw;
  background: red;
  margin-bottom: 50px;
}

#imglist {
  display: block;
  overflow: auto;
  height: 40vw;
  width: 40%;
}

#imglist div {
  display: block;
  width: 100%;
}

#imglist div img {
  width: 100%;
}


/*Problem*/

#container2 {
  display: block;
  width: 80%;
  height: 20vw;
  background: red;
}

#imglist2 {
  overflow-x: scroll;
  display: block;
  width: 100%;
  height: 15vw;
}

#imglist2 div {
  width: 20%;
  display: inline;
}

JSFiddle中的示例：https://jsfiddle.net/n4a2tc7s/

Answer 1

明确控制包装和隐藏

除了在容器上定义white-space: nowrap之外，您还应明确定义overflow-y: hidden而不是overflow-x: scroll。滚动条将自动出现在溢出的容器上（除非您已有防止它们的规则），因此您只需限制场景的y轴上的滚动条。

在以下示例中，我还在height: 100%上设置了#imglist2，因为15vw声明导致滚动条裁剪图像。如果这是故意的，请随意回滚：

#container2 {
  display: block;
  width: 80%;
  height: 20vw;
  background: red;
  white-space: nowrap;
}

#imglist2 {
  overflow-y: hidden;
  display: block;
  width: 100%;
/*height: 15vw;*/
  height: 100%;
}

#imglist2 div {
  width: 20%;
  display: inline;
}

<section id="container2">
  <div id="imglist2">
    <div>
      <img src="http://img.youtube.com/vi/Je7VuV9yHIw/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/uxps_fYUeJk/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/Zvr3cwbbqHU/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/Ka9xtXPD3BA/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/U8HVQXkeU8U/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/e7_UUfokexM/1.jpg">
    </div>
  </div>
</section>

Answer 2

尝试添加：

#container2 {
    display: block;
    width: 80%;
    height: 20vw;
    background: red;
    white-space: nowrap;
}