使用绝对位置循环以形成9个框 [英] Looping using position absolute to form 9 boxes
本文介绍了使用绝对位置循环以形成9个框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
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.
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屋!
查看全文