html - div 上的水平滚动条具有动态内容和隐藏的 overflow-y

Question

我需要一个只有一行图片的div，div里面的图片数量可以随时改变。所以我想要水平滚动条。 我有如下结构。我试图用 css 实现它，但不幸的是它不起作用。

<div id="scroll-wrapper">
  <div id="thumbnails">
    <div class="thumbnail-container active">
      <img src="foobar" />
    </div>
    <div class="thumbnail-container">
      <img src="bar" />
    </div>
  </div>
</div>

CSS 代码: http://jsfiddle.net/c622c3w9/2/

请注意，我不想要使用 javascript 的解决方案。

Answer 1

我必须删除 float: left 才能使滚动工作

 #thumbnails {
  padding-bottom: 10px;
  max-height: 50px;
  min-width: 100px;
  overflow-y: hidden;
  overflow-x: scroll; /*add this so you get bottom scrollbar*/
  white-space: nowrap; /*add this to stop images wrapping so thay stay on one line*/
}

.thumbnail-container {
  display: inline-block;
  position: relative;
  line-height: 5px;
  border: 2px solid steelblue;
  margin: 3px;
  display: inline-block;
  /*float: left; remove this otherwise scroll will not work*/
  margin-bottom: 15px !important;
}

http://jsfiddle.net/c622c3w9/3/