html - 停止 float 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

float 元素取决于其容器的宽度，不会影响容器的大小。如果可能，在这种情况下不要使用 float 元素。我会在父级上使用 display:inline-block 和 white-space:nowrap。

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

另一种方法是在容器上提供非常大的宽度，但我不建议这样做，因为它看起来很草率。

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

这是一篇关于 float 如何工作的好文章: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/