溢出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> 

我想股利#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

我怀疑你想要的是在同一高度上调整自己的日程安排。

尝试添加该到你的CSS：

#wrapper{overflow:auto;} 

.schedule{float:left;} 

很抱歉，如果我missunderstod你的规范，但我认为这是你真正想要的。