javascript - 在高度和宽度上用另一个 div 填充一个 div

Question

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

一些想法？

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

Answer 1

我认为你可以使用 flex 显示。我写了一个简单的例子来展示固定容器的用法: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 个时，它们会很好地拉伸(stretch)到整个宽度。如果有 4 个或更多项 (100%/25% (min-width = 25%) = 4)，它们将保持宽度并换行。调整子 div 的数量和最小/最大宽度以查看效果。