溢出的div

Question

我似乎无法弄清楚这一点。

我有以下代码：

<div id="wrapper">
    <div class="schedule">//blah</div>
    <div class="schedule">//blah</div>
    <div class="schedule">//blah</div>
    <div class="schedule">//blah</div>
    //
</div>

我希望div #wrapper具有固定宽度。我希望每个.schedule也具有固定的宽度。然后我想要，它在div中有太多，我可以在该页面内左右滚动。

我不能这样做!!无论我尝试什么，当我添加更多.schedule时，它们会弹到页面底部，然后开始填充下一行！

干杯 Kousha

编辑：谢谢。所有结果都有效。除了我需要能够使用float：left;或者其他什么东西让所有的div都相互存货！我怎么能这样做？

Answer 1

可以使用以下CSS完成：

#wrapper {
    overflow-x: auto;
    white-space: nowrap;  
    max-width: 300px;
    border: 1px solid red;
}
#wrapper .schedule {
    display: inline-block;     
    padding: 5px;        
}

我已经整理了一个基本的JSFiddle demonstration。

Answer 2

的 Live Demo 的

你好习惯这个css

#wrapper{
min-width:200px;
  background:red;
  font-size:0;
  white-space:nowrap;

}
.schedule{
height:100px;
  font-size:12px;
  width:100px;
  background:green;
  margin:1px;
  display:inline-block;
  vertical-align:top;
}

Demo

现在根据你的布局改变宽度或高度.........

Answer 3

我怀疑你想要的是schedule-divs浮动以使自己在同一高度上对齐。

尝试将此添加到您的css：

 #wrapper{overflow:auto;}

.schedule{float:left;}

很抱歉，如果我错过了您的规格，但我认为这就是您真正想要的。