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/

フロートがどのように機能するかについての良い記事は次のとおりです 。

于 2012-08-10T10:08:02.970 に答える
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幅は、その中の.panelの倍数であるため、これを実現するにはスクリプトが必要になります。ほとんどの場合、JavaScriptです。

#wrapperの幅は任意でした。ビューポートに一度に3つのパネルを表示することにしました。

于 2012-08-10T10:15:30.877 に答える
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 に答える