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

Цель

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

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

Задний план

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

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

Вопрос

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


html css overflow horizontal-scrolling
person Jonas B    schedule 21.06.2011    source источник
comment
у вас также есть jquery в вашем решении?   -  person Xavier    schedule 22.06.2011

Ответы (2)


arrow_upward
13
arrow_downward

Оберните меньшие элементы 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>
person pat8719    schedule 21.06.2011
comment
это будет работать, если для содержащего div задана фиксированная ширина - person Xavier; 22.06.2011
comment
ДА! Это было именно то, что я имел в виду. Большое спасибо за Вашу помощь. Ты самый лучший. :-) Спасибо также Ксавье. Но мне не нужно изучать jquery, так проще. Я просто новичок. - person Jonas B; 22.06.2011
comment
Да, @Xavier верен, для этого требуется фиксированная ширина родительского div. - person pat8719; 26.05.2014
comment
Я бы очень хотел, чтобы вы использовали классы, вы не должны повторять тот же идентификатор, что и вы. - person JGallardo; 15.02.2016
comment
@ JGallardo да, это очень плохая практика, я исправил свою ошибку, спасибо, что указали на это - person pat8719; 16.02.2017

arrow_upward
17
arrow_downward

Я сделал это с помощью 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

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

person Xavier    schedule 21.06.2011
comment
У вас есть float: left дважды. - person JGallardo; 11.11.2015
comment
Это гораздо более чистый ответ, и он был бы более приемлемым ответом на вопрос. - person JGallardo; 15.02.2016