javascript - 如何使用 CSS 和 Javascript 制作居中画廊布局？

Question

我正在尝试为一系列大小相同的盒子创建一个有吸引力的布局。盒子的数量会有所不同。这个想法是将盒子分成行和列以填充容器；容器大小随 Web 浏览器窗口的大小而变化。通常，您可以使用 float: left; 为每个框轻松完成此操作。这是皱纹:我想要最后一行，如果它不均匀，则居中。

示例:十三个盒子。三行四个盒子，第十三个盒子在第四行居中。

我几乎肯定这已经远远超出了 CSS 的领域，甚至是 CSS3，但我想知道是否有 Javascript 库或至少是众所周知的算法来处理这种事情。我对此有一些非常蛮力的想法，但我猜其他人已经以更优雅的方式做到了这一点。

即使是能够挑选出给定框的行和列之类的东西也是一个很好的开始。

Answer 1

假设您的 <img />就在.row里面, 做这样的事情似乎很容易:

.row:last-child {
  text-align: center;
}

如果没有，您仍然可以使用 :last-child , 只喜欢:

.row:last-child .box {
  display:block;
  margin: 0 auto;
}

关于实际生成 HTML 代码本身，您没有提供足够的信息来解决这个问题，但是您还是通过仅生成 <img /> 来解决这个问题。并将它们中的每 n 个包装在 .row 中或者通过在 .box 中生成它们，这些样式将起作用。