如何使用 div 制作网格？

Question

谁能告诉我我的代码有什么问题？ 我正在尝试使用 div 创建网格。 这是我到目前为止所拥有的，我不确定它为什么不创建网格。 我已经用谷歌搜索了很多次，我不知道为什么它不起作用。 编码新手，任何帮助将不胜感激。

 const container = document.querySelector('.container') function makeGrid(); for (i = 0, i < 16, i++); { const row = document.createElement("div") container.document.body.appendChild(row); row.textContent = i; for (j = 0, j < 16, j++); { const col = document.getElementById('div'); container.document.body.appendChild(col); col.textContent = j; } row.appendChild(col) container.appendChild(row) } makeGrid();

 html, body { height: 100%; width: 100%; } body { display: grid; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: repeat(3, auto); }.container { width: 20px; height: 20px; text-align: center; border: 1px solid blue; background-color: pink; display: inline-block; float: left; }

 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Etch-a-Sketch TOP Project</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="script.js"></script> <div class="container"></div> </body> </html>

Answer 1

这是一个简单的工作解决方案，您可以用作参考

 const container = document.querySelector(".container");

      function makeGrid() {
        for (i = 0; i < 16; i++) {
          for (j = 0; j < 16; j++) {
            const row = document.createElement("div");
            container.appendChild(row);
            row.textContent = `${i},${j}`
          }
        }
      }
      makeGrid();

      html,
      body {
        height: 100%;
        width: 100%;
      }

      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        text-align: center;
      }
      .container div{
        width: 30px;
        height: 30px;
        border: 1px solid blue;
        background-color: pink;
      }

您的代码中存在一些关于语法和逻辑的问题。

for 循环应该有一个分号； 而不是逗号，

for (i = 0, i < 16, i++)

应该

for (i = 0; i < 16; i++)

如果添加分号，则不会执行 for 循环； 在最后

for (i = 0; i < 16; i++); {
   // repetitive code
}

由于分号，将无法正常工作。 要使其正常工作，您需要删除； 像这样

for (i = 0; i < 16; i++) {
   // repetitive code
}

您为什么要获取 col 尚不清楚，但以下方法不正确。

const col = document.getElementById('div');

div 不是 ID，它是 HTML 标记。 所以你可以将上面的语句替换为

const col = document.getElementsByTagsName('div');

CSS 网格可以应用在 .container 内部而不是 body 内部，因为您的网格将填充在 .container 内部，而不是 body 内部。

Answer 2

你写的 javascript function 是错的。 我修改了你的几行代码。 试试这个。！

 const container = document.querySelector(".container"); function makeGrid() { for (i = 0; i < 16; i++) { const row = document.createElement("div"); row.className = "row"; container.appendChild(row); row.textContent = i; for (j = 0; j < 16; j++) { const col = document.createElement("div"); col.className = "col"; row.appendChild(col); col.textContent = j; } } } makeGrid();

 html, body { height: 100%; width: 100%; } body { display: grid; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: repeat(3, auto); }.container div { width: 20px; height: 20px; text-align: center; border: 1px solid blue; background-color: pink; display: inline-block; float: left; }

 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Etch-a-Sketch TOP Project</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="script.js"></script> <div class="container"></div> </body> </html>

当您定义 function 时; 不需要。 所以应该是这样function makeGrid(){... }

如何使用 div 制作网格？

问题描述

2 个解决方案

解决方案1
0 2022-09-12 18:42:34

解决方案2
0 2022-09-12 18:51:44

如何使用 div 制作网格？

问题描述

2 个解决方案

解决方案1 0 2022-09-12 18:42:34

解决方案2 0 2022-09-12 18:51:44

解决方案1
0 2022-09-12 18:42:34

解决方案2
0 2022-09-12 18:51:44