javascript - 使用绝对位置循环形成 9 个框

Question

1 2 3
4 5 6
7 8 9

我想在js中使用绝对定位和循环来实现上面的框位置。但我坚持开始第二行。

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

我不使用 float left 是有原因的。

Answer 1

您还需要增加 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;
    }
}

演示:Fiddle