Question

我正在使用具有特定宽度和高度的div填充body。然后我得到这组盒子的宽度。我使用此宽度将此组用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);

    });

由于

Answer 1

好的，我想我明白你的意思。这是我做的工作小提琴：http://jsfiddle.net/6NLjU/

除了您的代码，我还做了两件事。

1）在容器div上添加了一个clearfix，这样即使你浮动内盒也总是有一个高度。

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

2）在while循环结束后，删除最后一个框。这是因为循环不知道它已超出窗口大小，直到它添加一个不适合的盒子然后看到容器太大。所以之后，我删除了一个不合适的盒子。

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

用div填充容器

1 个答案: