css - CSS の Nth-Child を介して 3 つの異なるシナリオで 5 つのオープン スポットを作成する

Question

3 つの異なるシナリオで、左にフロートする div の行があります。各シナリオで、すべての div を一番下に並べ、各シナリオで同じ量の div を使用し、5 つの交差したオープン スポットを作成しようとしています。紛らわしいですか？私のシナリオを教えてください..

シナリオ 1

43分割 1 行あたり 4 つの div で、5 つのオープン スポットがあります。div は一番下にうまく並んでいます (それぞれの空白の場所が div で埋められると仮定します)。

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

シナリオ 2

43分割 1 行あたり 3 div、5 つのオープン スポット。div は一番下にうまく並んでいます (それぞれの空白の場所が div で埋められると仮定します)。

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

シナリオ 3 (機能しない)

43分割 1 行あたり 5 div で、5 つのオープン スポットがあります。div は一番下に並んでいません。一番下の行の 1 つの最後の開いたスポットが div で埋められると仮定すると、2 つの開いたスポットがあります。

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

したがって、行ごとに 5 つの div を使用するシナリオ 3 だけが機能しません。2 つの余分なオープン スポットがあります。すべての div を 5 つのオープン スポットで下部に並べる方法を見つけたいと思います。または、5 でこれを行うことができない場合は、おそらく 4 または 6.. 私は数学があまり得意ではありません。そして、divを設定したり、余分なdivを1つか2つ隠しdisplay:noneたりすることに頼りたくありません。visibility:hidden

では、これをどのように機能させ、すべての div を 1 行あたり 5、4、および 3 div の下部に並べ、各シナリオで同じ量の div と空きスポットを確保するにはどうすればよいでしょうか? どんな助けでも本当に感謝します:)

Answer 1

数日間のテストを行った後、シナリオごとに64 div /ボックス（行ごとに5、3、および4 div）があり、各シナリオに6つのオープンスポットがあり、すべてのdivが下部に完全に並んでいることがわかりました。