使用绝对位置循环以形成9个框 [英] Looping using position absolute to form 9 boxes

问题描述

1 2 3
4 5 6
7 8 9

我想使用js中的绝对定位和循环来实现上述框的位置.但是我被困在开始第二行.

I want to achieve above boxes position using absolute positioning and looping in js. But I'm stuck at starting a second line.

http://jsfiddle.net/k554x7vs/

var left = 0;
for (var i = 1; i <= 10; i++) {

    $('<div class="box" id=box' + i + '></div>').appendTo('#holder');

    if (i == 3) {

        //2nd line and so on..
        left = 0;
        $('#box' + i).css({
            'top': 70
        })



    }


    $('#box' + i).css({
        'left': left
    });

    left += 60;
}

我不使用左浮动是有原因的.

There's a reason why I don't use float left.

推荐答案

您还需要增加top

var left = 0,
    top = 0;
for (var i = 1; i <= 10; i++) {
    $('<div class="box" id=box' + i + '></div>').appendTo('#holder');
    $('#box' + i).css({
        'left': left,
        top: top
    });
    left += 60;
    if (i % 3 == 0) {//need to increment top also need to use the modulus operator since you want to reset/increment after each 3rd element
        left = 0;
        top += 70;
    }
}

演示:小提琴

这篇关于使用绝对位置循环以形成9个框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！