用其他 div 填充一个 div 的高度和宽度

Question

我有一个可以有百分比或固定尺寸的 div；我需要用其他大小相同的 div 完全填充 div，以形成一个网格。

有什么想法吗？

编辑： 我想生成一个类似于下面立即可见的网格

Answer 1

我认为您可以使用柔性显示。我写了一个简单的例子来展示固定容器的用法：http://jsbin.com/huqituhewu/edit?html,css,output。您可以通过以下方式使子 div 填充空间（它是 jsbin 链接的一部分）：

.container {
  position: fixed;
  height: 100px;
  width: 100px;
  display: flex;
}

.container > * {
  flex: 1;
} 

有一个很好的关于 flex 的教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

如果您想要多行显示，请多玩一点以形成漂亮的网格。

编辑：我添加了 flex-wrap 和 min-width 样式。现在，当您的容器中有更多项目时，就会形成行。请注意，当行中的项目少于 4 个时，它们会很好地伸展到整个宽度。如果有 4 个或更多项目 (100%/25% (min-width = 25%) = 4)，它们会保持宽度并换行。使用子 div 的数量和最小/最大宽度来查看效果。