阻止浮动的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/