css - 通过 CSS 的 Nth-Child 在 3 个不同的场景中创建 5 个开放点

Question

在三种不同的情况下，我有一排向左浮动的 div。对于每个场景，我都试图让我的所有 div 在底部排成一行，同时为每个场景使用相同数量的 div 并制作 5 个纵横交错的开放点。听起来很混乱？让我给你我的场景..

情景一

43 格 每行 4 个 div，有 5 个空位。div 在底部排成一排（假设每个空白点都将被一个 div 填充）。

http://jsfiddle.net/XXfe2/1/

方案二

43 格 每行 3 个 div，有 5 个空位。div 在底部排成一排（假设每个空白点都将被一个 div 填充）。

http://jsfiddle.net/XXfe2/9/

场景三（无效）

43 格 每行 5 个 div，有 5 个空位。div 不会在底部排列，会有两个空位，假设底行的最后一个空位将被一个 div 填充。

http://jsfiddle.net/XXfe2/8/

因此，每行 5 个 div 的场景 3 是唯一不起作用的场景。会有两个额外的空位。我想找到一种方法让所有 div 在底部排成 5 个空位，或者如果不可能用 5 个、4 个或 6 个来做到这一点。我的数学不太好。而且我不想求助于设置 divdisplay:none或visibility:hidden隐藏一个或两个额外的 div。

那么我将如何进行这项工作并让所有 div 在底部排列成每行 5、4 和 3 个 div，同时为每个场景提供相同数量的 div 和空位？任何帮助将不胜感激:)

Answer 1

经过几天的测试，我发现每个场景有64 个 div / 框（每行 5、3 和 4 个 div），每个场景中有6 个开放点，并且在底部完美地排列了所有 div。