0

我正在创建 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 组合，但它们都没有奏效。任何指针都会有很大帮助。谢谢！

4

1 回答 1

1

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

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

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

编辑：

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

i 然后，您可以使用索引If遍历所有 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/

于 2012-08-24T18:28:11.507 回答