Question

我正在创建100个矩形div，现在我需要将它们放置在具有10列和10行的网格状结构中。我怎样才能做到这一点。一个重要的是顶部，底部，左侧或右侧css样式必须以％为单位，因为我具有放大和缩小功能，如果我将样式从％更改为px或em中的任何其他样式，divs重叠。有没有办法做到这一点。当我尝试时，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
                */
            };

我曾尝试过差异组合，但都没有奏效。任何指针都可能有很大的帮助。谢谢！

Answer 1

如果你想要cols和row，你可以：

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

使用第2和第3个选项，您应该将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/

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

1 个答案: