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

OK、私はあなたが何をしようとしているのか理解していると思います。これが私が作った実用的なフィドルです：http://jsfiddle.net/6NLjU/

あなたのコードに加えて、私は2つのことをしました。

1) コンテナ div に clearfix を追加して、内部ボックスをフローティングさせている場合でも常に高さを持つようにしました。

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

2) while ループが終了したら、最後のボックスを削除します。これは、ループが、収まらないボックスを追加してコンテナーが大きすぎることを確認するまで、ウィンドウ サイズを超えたことを認識しないためです。その後、収まらなかった1つのボックスを削除しました。

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