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

- Matt Roberts

---

我相信肯定有更好的答案，但是如果你添加一个比用户预期的宽度更大的宽度，例如 width: 10000px，则它将按照你想要的方式扩展，同时不会变得比面板的宽度更大。http://jsfiddle.net/yzTFC/15/ - Michael Peterson

对于任何想知道的人，使用非常大的宽度解决方案会导致IE 9-11显示滚动条延伸到那个疯狂的宽度。 - apokryfos

Answer 1

浮动元素要依赖它们容器的宽度，并且不会影响到容器大小。如果可能，建议避免在这种情况下使用浮动元素。我会在父级元素上使用display:inline-block和white-space:nowrap。

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

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

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

这里有一篇关于浮动的好文章： http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

- AlexM

---

谢谢 - 你赢了，因为你提供了另一个选项以及大宽度的选项。 - Matt Roberts

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/

- Ayman Safadi

Answer 3

我的答案与Ayman类似。我还添加了另一个容器。

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;}

#panel-container CSS的宽度是其内部的.panels的倍数，因此需要一些脚本来实现。很可能需要一些JavaScript。

#wrapper的宽度是任意的，我只是决定在视口中同时显示三个面板。

- freeMagee