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

цель

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

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

фон

при этом white-space: nowrap as описано в http://www.webmasterworld.com/forum83/8844.htm

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

вопрос

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

11
css horizontal-scrolling html overflow

2 ответов

оберните меньшие divs в третий 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>
13

Я сделал это с помощью 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, т. е. #overflow .container { width : 1880px }

17