javascript - 用 '.' 填充整个主体的 jQuery 代码

Question

我试图用“.”(一个点)填充整个 HTML 文档。这样我的 HTML 文档看起来就像一个网格。这是我取得的成就:jsFiddle当我改变 display:block在子类中，所有的点都垂直对齐。我想实现一个方形的点网格，它跨越整个 HTML 文档主体，每个点都在子类中。有什么办法可以做到吗？

HTML

<div id="main"></div>

jQuery

$(document).ready(function() {
  for (var i = 0; i < 1000; i++) {
    $("#main").append("<div class='child'>.</div>");
  }
});

CSS

body,
html {
  width: 100%;
  height: 100%;
}
#main {
  width: 100%;
  height: 100%;
}
.child {
  width: 2px;
  height: 2px;
  display: inline;
}

Answer 1

尝试将其设置为内联 block 。

请注意，这可能需要超过 1000 个节点。最好将 #main 设置为点背景图像并使其重复。它会有更好的性能(除非你需要用点做一些事情)。