如何使用div制作40x40网格？

Question

我基本上尝试使用javascript在我的html文档中创建一个40x40红格的div.

这是我的循环:

for(var i = 0; i < 40; i++) {
        for(var j = 0; j< 40; j++) {
            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
        }
        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }

问题是我似乎无法让它形成我创建的所有div的正方形.容器是1000 x 1000像素.谢谢

Answer 1

你需要的只是将最后3行放在内部循环中(不在外部循环内):

for(var i = 0; i < 40; i++) {
    for(var j = 0; j< 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";

        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }
}

另外,不要忘记将'display'设置为'inline-block':

div.style.display = "inline-block";

或者,您必须使用'float'属性:

div.style.float = "left";

编辑:

使用row-div对一行中的每个40个单元格进行分组:

for(var i = 0; i < 40; i++) {
    var row = document.createElement("div");
    for(var j = 0; j< 40; j++) {
        var cell = document.createElement("div");
        cell.style.width = "25px";
        cell.style.height = "25px";
        cell.style.background = "red";
        cell.style.display = "inline-block"

        row.appendChild(cell);
    }
    document.getElementById("container").appendChild(row);
}

Answer 2

我相信您想要的是以下内容：

for (var i = 0; i < 40; i++) {
    for (var j = 0; j < 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";
        document.getElementById("container").appendChild(div);
    }
    var jump = document.createElement("br");
    document.getElementById("container").appendChild(jump);
}

#container {
    width:1000px;
    height:1000px;
}
#container div {
    display:inline-block;
    vertical-align:top;
}

<div id="container"></div>

您的内部 div 可以是内联块元素，以便它们彼此相邻（因为默认情况下 div 是块级的）。您还需要在每个内部 (j) 循环之后插入换行符。所以过程是：生成 40 个内联 div，插入换行符，生成 40 个内联 div，插入换行符，...（再重复 38 次）。