javascript - 如何将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

如果你想要 cols 和 rows 你可以:

• 创建一个表
• 设置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/