溢出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你的規範，但我認爲這是你真正想要的。