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/

Answer 2

你只需要做两件事。 Fiddle

.thumbnail-container {
  .......
  // float: left;     <== Remove
}

#thumbnails {
  .....
  white-space: nowrap;   // Add
}

div上的水平滚动条，带有动态内容和溢出-y隐藏

2 个答案: