CSS水平滚动

Question

我正在尝试创建一个 <div> 以及一系列只能水平滚动的照片。

它应该看起来像这样 LINK ；

然而，以上内容只能通过为包含照片的 <div> 指定宽度来实现（因此它们不会“自动换行”）。如果我不设置宽度 - 它看起来像这样； 关联

由于图像可能会有所不同，我可以使用 CSS 做什么来防止放置固定宽度。

谢谢

原文由 Simon R 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将 display:inline-block 与 white-space:nowrap 一起使用。像这样写：

 .scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap;
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

检查这个 http://jsfiddle.net/YbrX3/

原文由 sandeep 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个针对宽度和高度 可变 的图像的 flexbox 解决方案：

 .container {
  display: flex;
  flex-wrap: no-wrap;
  overflow-x: auto;
  margin: 20px;
}
img {
  flex: 0 0 auto;
  width: auto;
  height: 100px;
  max-width: 100%;
  margin-right: 10px;
}

 <div class="container">
 <img src="https://via.placeholder.com/100x100" />
 <img src="https://via.placeholder.com/50x50" />
 <img src="https://via.placeholder.com/5x50" />
 <img src="https://via.placeholder.com/100x50" />
 <img src="https://via.placeholder.com/50x100" />
 <img src="https://via.placeholder.com/20x50" />
 <img src="https://via.placeholder.com/50x30" />
 <img src="https://via.placeholder.com/50x150" />
 <img src="https://via.placeholder.com/250x50" />
 <img src="https://via.placeholder.com/150x350" />
 <img src="https://via.placeholder.com/50x350" />
 <img src="https://via.placeholder.com/100x100" />
 <img src="https://via.placeholder.com/50x50" />
 <img src="https://via.placeholder.com/5x50" />
 <img src="https://via.placeholder.com/100x50" />
 <img src="https://via.placeholder.com/50x100" />
 <img src="https://via.placeholder.com/20x50" />
 <img src="https://via.placeholder.com/50x30" />
 <img src="https://via.placeholder.com/50x150" />
 <img src="https://via.placeholder.com/250x50" />
 <img src="https://via.placeholder.com/150x350" />
 <img src="https://via.placeholder.com/50x350" />
</div>

原文由 Barnee 发布，翻译遵循 CC BY-SA 4.0 许可协议