个人中心
gpt4 book ai didi

javascript - 网格中行之间的空间

转载 作者：行者123 更新时间：2023-12-04 02:26:43 24 4
gpt4 key购买 nike

<分区>

我正在尝试创建一个 16x16 的网格。除了我的行之间有一些空间外，一切都很完美，我不知道为什么。列之间的间距是完美的，但行之间有一些间隙。

这是我的代码:

const container = document.getElementById("drawingGrid");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");

function createGrid() {
  makeRows(16);
  makeColumns(16);
}

// create rows
function makeRows(rowNum) {
  for (r = 0; r < rowNum; r++) {
    let row = document.createElement("div");
    container.appendChild(row).className = "gridRow";
  }
}
// create columns
function makeColumns(cellNum) {
  for (i = 0; i < rows.length; i++) {
    for (j = 0; j < cellNum; j++) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    }
  }
}

createGrid();
.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 10px;
  display: inline-block;
  margin: 0;
  padding: 0;
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>EtchASketch</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div id="drawingGrid">
  </div>

  <script src="app.js"></script>
</body>

</html>

这是它在 chrome 上的样子:

enter image description here

24 4 0
文章推荐： sql - 过滤存储过程结果 (Informix)
文章推荐： python - 用日期做这个 pandas 公式的更快(矢量化)方法
文章推荐： 用于在图中查找人脸的 Java 算法
文章推荐： python - 为什么我可以将 UTF-8 字节字符串解码为 ISO8859-1 并在没有任何 UnicodeEncodeError/UnicodeDecodeError 的情况下再次解码？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com