1 2 3
4 5 6
7 8 9
我想在js中使用绝对定位和循环来实现上面的框位置。但我坚持开始第二行。
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 是有原因的。
最佳答案
您还需要增加 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
关于javascript - 使用绝对位置循环形成 9 个框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29137152/