Question

我正在尝试使用jquery创建一个16x16网格。我有一个主要的div，然后我试图在其中创建网格。我正在使用for循环，但是当下面的代码运行时，我得到一个16x32网格。

有人可以解释发生了什么以及为什么会发生这种情况吗？

<html>
<head>
    <title>etch-a-sketch</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
    <div id=main>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type='text/javascript' src='app.js'></script>
</body>

#main {
   height: 192px;
   width: 192px;
   background-color: antiquewhite;
}

.squares {
   height: 10px;
   width: 10px;
   margin: 1px;
   background-color: aquamarine;
   display: inline-block;
}

$(document).ready(function() {
   for(var x = 0; x < 16; x++) {
       for(var y=0; y<16; y++) {
           $("<div class='squares'></div>").appendTo('#main');
       }
   }
});

Answer 1

你得到一个16x16网格。当您使用＆＃34;内联＆＃34;时，就会出现空格。只需将CSS代码更改为：

＆＃13;

#main {
  height: 192px;
  width: 192px;
  background-color: antiquewhite;
}

.squares {
  height: 10px;
  width: 10px;
  margin: 1px;
  background-color: aquamarine;
  display: block;
  float: left;
}

＆＃13;

注意：

＆＃13;

display: block;
float: left;

＆＃13;

Answer 2

我认为你的思维过程已关闭..我认为制作一个16x16网格（总共256个盒子）的最好方法就是我在下面使用css来设置样式。

HTML

<div id="main">

</div>

CSS

#main {
  width: 100%;
}
.squares {
  width:6%;
  height: 50px;
  border: 1px solid red;
  display:inline-block;
}

Javascript

for(var x = 0; x < 256; x++) {
    $("<div class='squares'>hi</div>").appendTo('#main');
}

使用for循环jquery创建网格

2 个答案: