主div中的滚动条显示其中的div

Question

我正在构建一个只有640px宽的网站，我有一个div，我希望浮动多个div并在下方显示滚动条，以便用户可以从左向右滚动以查看不同的div。

http://jsfiddle.net/nNG64/1/

HTML

<div id="all-videos">
  <div class="video-item">Video one</div>
  <div class="video-item">Video two</div>
  <div class="video-item">Video three</div>
</div>

CSS

#all-videos {
  width: 640px;
  height: 300px;
  overflow: scroll;
  border:1px solid red;
  background: #000;
}

.video-item {
  float: left;
  background: #eee;
  border:1px solid #000;
  width: 500px;
  padding: 20px;
  height: 280px; 
}

有一次我想要显示一个水平的滚动条，我不能，但是当我不想要一个...它发现自己在那里进行调试：）

附件是证明的截图，我必须设置滚动条的样式，但这不应该是一个问题，我只需要让它工作。

Answer 1

1. 使用overflow-x:scroll和overflow-y:hidden进行#all-videos
2. 使用宽度大于#all-videos的内容将#all-videos内的视频换行，否则内容将突破到下一行：

HTML

<div id="all-videos">
    <div class="video-wrapper">
        <div class="video-item">Video one</div>
        <div class="video-item">Video two</div>
        <div class="video-item">Video three</div>
    </div>
</div>

CSS

#all-videos {
width: 640px;
height: 300px;
overflow-x: scroll;
overflow-y: hidden;
border:1px solid red;
background: #000;
}
.video-wrapper {
width:1626px;
}
.video-item {
float: left;
background: #eee;
border:1px solid #000;
width: 500px;
padding: 20px;
height: 280px; 
}