web-dev-qa-db-ja.com

多くの小さなDIVが内部にあるDIVの水平スクロール（テキストなし）

目的

高さと幅が固定されたメインDIVがあり、小さなDIVをたくさん自由に浮かせたいと思っています。メインのDIVに収まらないほど小さなDIVがあります。次に、デフォルトでは、メインDIVの外側にある小さなDIVdownが消えているようです。代わりに、右側に消えてほしい。

水平スクロールバーをトリガーしたいのですが、垂直スクロールバーはトリガーしません。

バックグラウンド

http://www.webmasterworld.com/forum83/8844.htm で説明されているように、これをwhite-space: nowrapでテストしました。

また、メインDIVにテキストまたは画像しかない場合は完璧に機能します。

質問

しかし、メインDIVに小さなDIVしか含まれていない場合はどうすればよいですか？

cssoverflowhtmlhorizontal-scrolling
11
Jonas B

小さいdivを、メインdivよりも幅が広い3番目のdivでラップします。私があなたの質問を正しく理解したと仮定すると、jqueryは必要ありません。

<html>
    <head>
        <style type="text/css">       
            .div_1
            {

                height: 350px;
                width: 350px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_3
            {
                float: left;
                height: 350px;
                width: 500px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_2
            {
                height: 100px;
                width: 100px;
                border: 1px solid #A2A2A2;
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="div_1">
            <div class="div_3">
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
            </div>
        </div>
    </body>
</html>
13
pat8719

私はjQuery、HTML、CSSを使用してこれを行いました：

HTML

<div id="overflow">
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

#overflow{
    border: 1px solid #000;
    height: 220px;
    width: 220px;
    overflow-x: scroll;
    overflow-y: hidden;
}
#overflow .container div{
    border: 1px solid #CCC;
    float: left;
    width: 200px;
    height: 200px;
}

jQuery

$(function(){
    var width = 0;
    $('#overflow .container div').each(function() {
        width += $(this).outerWidth( true );
    });
    $('#overflow .container').css('width', width + "px");
        alert(width);
    });
});

基本的に、幅は親divから本質的に適用されるため、divはCSSで流動的な幅を使用できません。

いくつかのjQueryコードを使用すると、含まれているdivに幅を簡単に付加できます。

これが最終的なコードのフィドルです。

OR

コンテナdivで固定幅を使用します。つまり#overflow .container { width : 1880px }

17
Xavier