Question

我正在为下一个项目开发核心组件，我需要一种用HTML或JavaScript制作网格的方法，该网格将具有在某种意义上可以彼此了解的网格点。我现在的问题是我一开始无法弄清楚如何制作网格。我有一个HTML div 800x800px，我需要将其细分为50x50px div，唯一的问题是，如果我对其进行硬编码，则不宜编写和设置256 div的样式。有什么方法可以使用JavaScript将div拆分成这些片段，或者可以使用画布动画呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>FindMyKeys</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="background">
            <div id="grid1" class="grid"></div>
        </div>
        <script src="app.js"></script>
    </body>
</html>

body {
    margin:0;
}

#background {
    position:absolute;
    height:800px;
    width:800px;
    background-color:grey;
    top:100px;
    left:540px;
}

Answer 1

我不太确定“互相了解”是什么意思，但是为什么不使用grid CSS属性呢？看来这很适合您想做的事。

如果不能，则可以始终将画布创建为包装div，然后将这256个div创建为画布中的绝对位置项，但是我对此并不满意。首先，您应该解释一下为什么您不能真正使用CSS网格。

将div分成网格或多种div的任何方法

1 个答案: