4

我有一个包含许多左浮动 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/

4

3 回答 3

8

浮动元素取决于其容器的宽度，不会影响容器的大小。如果可能，在这种情况下不要使用浮动元素。我会在父级上使用 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/

于 2012-08-10T10:08:02.970 回答
0

试试这个：

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/

于 2012-08-10T10:07:49.043 回答
0

我的回答与艾曼类似。我还添加了另一个容器。

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 宽度是任意的，我只是决定在视口中一次显示三个面板。

于 2012-08-10T10:15:30.877 回答