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)是唯一不起作用的方案。会有两个额外的空位。我想找到一种方法让所有 div 在底部排成一行，有 5 个空位，或者如果不可能用 5 个空位做到这一点，也许 4 或 6..我不太擅长数学。而且我不想通过将 div 设置为 display:none 或 visibility:hidden 来隐藏一两个额外的 div。

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

Answer 1

经过几天的测试后，我发现每个场景都有 64 个 div/框(每行 5、3 和 4 个 div)，其中 6 个空位每个场景都有效并且完美地排列了底部的所有 div。