Javascript 如何放置div'；s为矩阵形式/网格形式的类似结构

我正在创建100个矩形div，现在我需要将它们放置在一个网格状结构中，有10列10行。我该怎么做呢。一件重要的事情是，顶部、底部、左侧或右侧css样式必须为%，因为我有放大和缩小的imp功能，如果我将样式从%更改为px或em中的任何其他样式，则div会重叠。有没有办法做到这一点。当我尝试的时候，两个div的位置是一个比另一个低。这就是我所做的

            setCss = function($divId,$len) {
            //$len specifies the count number of the particualr div  
            //  $divId = $("#window3");
                alert("xmlLength is :"+$len);
                alert("set CSS::"+$divId);
                if ($len<3)//(i%2==0)
                {
                    var size = 10;

                    $("div#"+$divId).css("top",size*$len+"%");
                    $("div#"+$divId).css("left",size*$len+"%");
                    $("div#"+$divId).css("transform","none");
                    $("div#"+$divId).css("margin","10px");

                }
                if (i>=3 )
                {
                    var size = 10;
                    $("div#"+$divId).css("top",size*$len+"%");
                    $("div#"+$divId).css("left",size*$len+"%");
                    $("div#"+$divId).css("bottom",size*$len+"%");
                    $("div#"+$divId).css("right",size*$len+"%");

                    $("div#"+$divId).css("transform","none");
                    $("div#"+$divId).css("margin","10px");

                }
            //  top:10%;left:20%;transform:none;margin:10px
                /*
                        Define the CSS for creating the grid like structure for 100 small divs
                */
            };

setCss=function（$divId，$len）{
//$len指定particualr div的计数
//$divId=$（“#window3”）；
警报（“xmlLength为：”+$len）；
警报（“设置CSS:：”+$divId）；
如果（$len=3）
{
变量大小=10；
$（$div#“+$divId）.css（“top”，size*$len+“%”）；
$（$div#“+$divId）.css（“左”，大小*$len+“%”）；
$（$div#“+$divId）.css（“底部”，大小*$len+“%”）；
$（$div#“+$divId）.css（“右”，大小*$len+“%”）；
$（$div#“+$divId）.css（“转换”，“无”）；
$（“div#“+$divId）.css（“margin”，“10px”）；
}
//顶部：10%；左侧：20%；变换：无；边距：10px
/*
定义用于为100个小div创建网格状结构的CSS
*/
};

我试过不同的组合，但都不起作用。

---

任何指点都会有很大帮助。谢谢

如果需要列和列，可以：

• 创建一个表
• 将

  display:inline block

  设置为div，每10个div添加一个空的额外div，并使用

  display:block

• 将

  float left

  设置为div，每增加10个div

  clear:right

使用第二个和第三个选项，您应该为容器设置

minwidth:[10*divWidth]

编辑：

啊，看起来你用的是绝对定位的div

然后，您可以使用索引

i

如果

i%10==0

，增加

top

属性并重置

left

或者，更好的是，不需要使用当前

顶部
和
左侧
的变量

var cols=10,
    rows=5,
    wid=10,
    hei=20,
    d=document.createElement('div');
d.className='cell';
d.style.width=wid+'px';
d.style.height=hei+'px';
for(var i=0;i<cols*rows;i++){
    var c=d.cloneNode(false);
    c.style.top=Math.floor(i/cols)*hei+'px';
    c.style.left=i%cols*wid+'px';
    document.body.appendChild(c);
}

var cols=10，
行=5，
wid=10，
hei=20，
d=document.createElement（'div'）；
d、 className='cell'；
d、 样式宽度=wid+'px'；
d、 样式.高度=hei+'px'；
对于（var i=0；i当看起来像你发布的代码时，我根本无法工作。“i”是什么？请发布你的整个代码解决这个问题。包括html、css、js。对不起，我是div的计数或该div的编号，如1、2、3、…、99100，但没有定义div的索引。从你发布的内容来看，您调用此函数时与索引没有任何关系。'i'应该是函数的参数。@SvenBieder:i是全局变量。我现在用$len更新了代码，该参数指定了div的索引。仅在制作这种简单的网格时，绝对不需要使用javascript。您可以使用css来完成如果我不想使用表结构怎么办？如果我不添加空白div，而是指定边距怎么办？你能给我一个小提琴吗？谢谢为什么需要克隆节点并将其附加到正文中。在我的情况下，我在调用setCss函数之前将其附加到正文中。如果我删除克隆部分并附加，所有div都会被删除重叠。任何避免这一切的方法都可以得到网格状结构。
// Creating variables
var cols=10,
    rows=5,
    wid=10,
    hei=20,
    d=document.createElement('div'),
    wrap=document.getElementById('wrapper');
d.className='cell';
    d.style.width=wid+'px';
    d.style.height=hei+'px';

//Creating elements
for(var i=0;i<cols*rows;i++){
    var c=d.cloneNode(false);
    wrap.appendChild(c);
}

//Setting position
for(var i=0;i<wrap.childNodes.length;i++){
    setCSS(i);
}
function setCSS(i){
    var el=wrap.childNodes[i];
    el.style.top=Math.floor(i/cols)*hei+'px';
    el.style.left=i%cols*wid+'px';
}