Заполните контейнер с div

Question

Заполните контейнер с div

0

Я заполняю body div, которые имеют определенную ширину и высоту. Затем я получаю ширину этой группы ящиков. Я использую эту ширину для центрирования этой группы с помощью CSS (margin: 0 auto). Моя проблема в том, что я получаю дополнительную строку всегда, которая не имеет одинакового количества div.

Вот мой код.

HTML:

<body>
<!-- Container-->
<div id="container_boxes" class="clearfix"></div>
</body>

CSS:

#container_boxes{
    margin: 0 auto; 
    padding: 5px;
}

.box{
    width: 250px;
    height: 250px;
    margin: 5px;
    float: left;
    box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.box:hover{
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.15);   
}

JS:

$(document).ready(function(){

        while( $(window).height() > $("#container_boxes").height() && $(window).width() > $("#container_boxes").width()) {
            $("#container_boxes").append("<div class=\"box\"></div>");

        }

        colors= ['#bdc3c7', '#7f8c8d', '#95a5a6', '#2c3e50', '#34495e'];
        $('.box').each(function(){
            var rndmclr = colors[Math.floor(Math.random()*colors.length)];
            $(this).css('background-color', rndmclr);
        });

        function boxesNumbers(){
            var num_boxes = 0;
            $('.box').each(function(){
                if($(this).prev().length > 0){
                    if($(this).position().top != $(this).prev().position().top) return false;
                        num_boxes++;
                } else {
                    num_boxes++;
                }
            });
            $('#container_boxes').css('width', num_boxes*260);
        };

        boxesNumbers();
        $(window).resize(boxesNumbers);

    });

благодаря

Gonzalo Castillo 01 окт. 2013, в 19:33

Источник

1

пожалуйста, создайте скрипку, и будьте более конкретны о том, что вы хотите, чтобы произошло.
andi 01 окт. 2013, в 18:01
0

Я сделал эту скрипку и позволил ей какое-то время работать, но она никогда не прекращалась.
Mr Lister 02 окт. 2013, в 07:41
0

Я пытаюсь сделать скрипку, но она продолжает падать, что-то не так с циклом while. @andi, что я пытаюсь сделать , это заполнить body с квадратами, но body зависит от размера окна. С помощью приведенного выше кода я смог заполнить тело, но всегда есть дополнительная строка, которая не имеет того же числа квадратов, что и предыдущие строки. Я не хочу этот дополнительный ряд.
Gonzalo Castillo 04 окт. 2013, в 13:27

Показать ещё 1 комментарий

Теги:

jquery

html

css

1 ответ

Ещё вопросы

пожалуйста, создайте скрипку, и будьте более конкретны о том, что вы хотите, чтобы произошло.
Я сделал эту скрипку и позволил ей какое-то время работать, но она никогда не прекращалась.
Я пытаюсь сделать скрипку, но она продолжает падать, что-то не так с циклом while. @andi, что я пытаюсь сделать , это заполнить body с квадратами, но body зависит от размера окна. С помощью приведенного выше кода я смог заполнить тело, но всегда есть дополнительная строка, которая не имеет того же числа квадратов, что и предыдущие строки. Я не хочу этот дополнительный ряд.

andi · Accepted Answer · 2013-10-04T13-29-00.000Z

Хорошо, я понимаю, что понимаю, что вы собираетесь делать. Вот рабочая сцена, которую я сделал: http://jsfiddle.net/6NLjU/

В дополнение к вашему коду я сделал две вещи.

1) Добавлен clearfix в контейнер div, так что он всегда будет иметь высоту, даже если вы плаваете внутренние поля.

#container_boxes:after {content:""; display:table; clear:both;}

2) После окончания цикла while снимите последний флажок. Это связано с тем, что цикл не знает, что он превысил размер окна, пока он не добавит коробку, которая не подходит, а затем увидит, что контейнер слишком большой. Поэтому после этого я удалил одну коробку, которая не подходила.

$("#container_boxes .box:last-child").remove();