Горизонтальная прокрутка в DIV с большим количеством маленьких DIV внутри (без текста) - PullRequest
Новая
       18

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

11 голосов
/ 21 июня 2011

Цель

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

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

Фон

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

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

Вопрос

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

Ответы [ 2 ]

17 голосов
/ 22 июня 2011

Я сделал это, используя 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.

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

OR

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

13 голосов
/ 22 июня 2011

Оберните ваши меньшие 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>
...