Горизонтальная прокрутка в DIV со многими маленькими DIV внутри (без текста)

Цель

У меня есть основной DIV с фиксированной высотой и шириной, и в этом я хочу иметь много маленьких DIV, чтобы свободно плавать. У меня более маленькая DIV, чем может поместиться в основной DIV. Тогда кажется, что по умолчанию исчезает небольшая DIV вниз за пределами основного DIV. Я хочу, чтобы они исчезли справа.

Я хочу вызвать горизонтальную полосу прокрутки, но не вертикально.

Фон

Я тестировал это с помощью white-space: nowrap, как описано в http://www.webmasterworld.com/forum83/8844.htm

И он отлично работает, если у меня есть только текст или изображения в главном DIV.

Вопрос

Но как мне сделать, когда основной DIV содержит только небольшие DIV?

Ответ 1

Оберните свои меньшие div в третьем div, который имеет большую ширину, чем ваш основной 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>

Ответ 2

Я сделал это с помощью 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 не может использовать ширину жидкости в CSS, поскольку ширина применяется по сути из родительского div.

Используя некоторый код jQuery, вы можете легко присоединить ширину к содержащему div.

Вот скрипка с окончательным кодом.

ИЛИ

Используйте фиксированную ширину в контейнере div i.e. #overflow .container { width : 1880px }