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);

    });

谢谢

4

1 回答 1

0

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

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

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

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

2）while循环完成后，删除最后一个框。这是因为循环不知道它已经超出了窗口大小，直到它添加了一个不适合的框，然后发现容器太大了。所以后来，我把那个不合适的盒子拿走了。

$("#container_boxes .box:last-child").remove();
于 2013-10-04T16:24:25.603 回答