如何将 div 放置在矩阵形式/网格形式的结构中

Question

我正在创建 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
                */
            };

我曾尝试过 diff 组合，但都没有奏效。 任何指针都会有很大帮助。谢谢！

Answer 1

如果你想要列和行，你可以：

• 创建表
• 将display:inline-block设置为div，每10个添加一个带有display:block的空额外div
• 将 float-left 设置为 div，每 10 个添加到该 div clear:right。

使用第二个和第三个选项，您应该将min-width:[10*divWidth] 设置为容器。

编辑：

啊，看来您使用的是绝对定位的 div。

然后，您可以遍历索引为 i 的所有 div 如果i%10 == 0，增加top属性并重置left。

或者，甚至更好，不需要当前的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);
}

这里有一个 jsfiddle：http://jsfiddle.net/4pj74/

编辑 2：

如果你想先创建所有元素，然后设置它们的位置，

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

（现在我将它们附加到<div id="wrapper"></div>，因为也许 jsfiddle 会在正文中添加其他内容）

在这里查看：http://jsfiddle.net/4pj74/3/