多个内联div超过容器宽度(Multiple inline divs that exceed the container width)

我不知道如何保持多个div内联，如果他们的宽度超过容器宽度。如果所有div的宽度大约是1000像素，容器的宽度是500，我希望div与容器重叠，并且水平滚动酒吧出现。

#container {
  overflow: hidden;
  background: red;
  width: 500px;
  height: 500px;
}
#container>div {
  border: 1px solid #000;
  width: 30%;
  height: 100px;
  margin: 10px;
  float: left;
} 
  
<div id="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <br style="clear: both;">
</div> 
  
 
 
 小提琴： 点击 
I can't figure out how to keep multiple divs inline if their width exceeds container width.If the width of all divs is about 1000 px and the container's width is 500 , i want the divs to be overlapped by container , and a horizontal scroll bar to show up.
 
 
 
  
  
#container {
  overflow: hidden;
  background: red;
  width: 500px;
  height: 500px;
}
#container>div {
  border: 1px solid #000;
  width: 30%;
  height: 100px;
  margin: 10px;
  float: left;
} 
  
<div id="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <br style="clear: both;">
</div> 
  
 
 
Fiddle: Click
                
最满意答案
                
                    
                        
 不要使用float，使用容器设置为nowrap空白的内联块，然后添加overflow: auto; 到容器根据需要触发滚动条。 
 
 的jsfiddle 
 
#container{
  white-space: nowrap;
  overflow: auto;
}
#container>div{
  display: inline-block;
}
Don't use float, use inline block with container set to nowrap for white space, and then add overflow: auto; to the container to trigger the scrollbar as needed.
 
jsFiddle
 
#container{
  white-space: nowrap;
  overflow: auto;
}
#container>div{
  display: inline-block;
}