javascript - 如何创建 Windows 资源管理器大缩略图样式列表？

Question

我的目标是创建行为类似于 Windows 资源管理器大缩略图模式的元素列表，这是一个示例:

这是另一张显示调整窗口大小时的流动性的图片:

所以我看到这个并心想，哦，这很简单，我只需将元素设置为占用特定数量的空间，例如 20% 并设置最小高度和宽度，然后我得到了这个:

Example

但正如您猜到的那样，width: 20% 保持不变，结果如下所示:

这在我的情况下远非理想，因为现在我需要使用从 [1] 到 [我想要多少元素限制每个屏幕宽度] 媒体查询将告诉元素相对于容器采用不同的 %。

我想知道是否有一种聪明的方法可以实现这一目标，而无需编写 15 个媒体查询或一个真正最小的 JavaScript 实现来为我处理这个问题？

Answer 1

在 CSS3 中，您可以使用 box-sizing 属性并将其设置为“border-box”。通过代码 Paul Irish .

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

当您设置为 border-box 时，您在元素上设置的宽度(20%)将包括元素的填充和边框，因此 20% 实际上是 20%。默认情况下，使用 box-sizing: content-box，您的元素将是 20% + padding + width(每个都大于 20%)并且比您预期的更快回流到下一行。如果愿意，您可以坚持使用默认的框大小，但您需要调整百分比以考虑您为元素指定的填充和边框。

检查 browser support on caniuse.com .

您也可以使用 Flexboxes 查看，但我认为这对您的用例来说不是必需的，并且会进一步限制您可以支持的浏览器。