阻止浮動的div包裝到新行

Question

我有一個包含許多左浮動div的容器，類似於：

<div id="container">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

<style>
    .panel {float:left; width:200px;}

</style>

在我的應用程序中，用戶可以動態地向容器添加越來越多的面板，我希望它們總是在右側堆疊，並且當用戶超出可用空間時，可以顯示水平滾動條。

jsfiddle： http ： //jsfiddle.net/yzTFC/6/

Answer 1

浮動元素取決於其容器的寬度，不會影響容器的大小。 如果可能，請不要在這種情況下使用浮動元素。 我會使用display：inline-block with a white-space：nowrap on parent。

http://jsfiddle.net/yzTFC/45/

另一種方法是在容器上給出一個非常大的寬度，但我不建議這樣做，因為它看起來很草率。

http://jsfiddle.net/yzTFC/52/

這是一篇關於浮點數如何工作的好文章： http ： //coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 2

試試這個：

HTML

<div id="parent-container">
    <div id="container">
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
    </div>
</div>​

CSS

.panel {float:left; width:200px; background-color:red; height:100px; border:solid 1px black;}

#container { width: 9999px; }

#parent-container {
    overflow: auto;
}​

演示： http ： //jsfiddle.net/yzTFC/50/

Answer 3

我的回答與艾曼相似。 我還添加了另一個容器。

HTML

<div id="wrapper">
    <div id="panel-container">
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
    </div>
</div>​

CSS

.panel {float: left; width:200px; background-color:red; height:100px; border:solid 1px black;}
#wrapper {width: 606px; overflow-x: scroll; overflow-y: hidden; }
#panel-container {width: 1212px;}

其中#plate-container CSS width是其中.panels的倍數，因此需要一些腳本才能實現這一點。 最有可能是一些javascript。

#wrapper寬度是任意的，我只是決定在視口中一次顯示三個面板。