1

私はしばらくの間、この解決策を探していました... [bla bla... google.. bla]...

私はほとんどそこにいる例を作成しましたが、完全ではありません:

http://www.mikael-sandbox.com/puzzlecss/

ここに残したのは、数字の 1 を常に右下隅に配置することです。これは、ブロックの行が 1 つある場合に当てはまりますが、行が途切れると、行が上に移動します。私はそれがダウンしてほしい。何かご意見は？

4

1 に答える 1

2

要素がページに動的に追加されている場合 (そうでない場合でも)、明らかな解決策はそれらの順序を逆にすることです。コンテナーの境界を超えて拡張される要素は、常に下に折り返されます。フロートとラッピングに関する洞察を提供する可能性のあるリンクがいくつか見つかりました。

http://archivist.incutio.com/viewlist/css-discuss/33948

http://css.maxdesign.com.au/floatutorial/introduction.htm 「浮動要素はどこに移動しますか?」を参照してください。

編集
コンテナは固定幅ですか、ビット div は一貫した幅ですか? もしそうなら、コンテナ内の行に X 個のビット div を収めることができます。それを念頭に置いて、「行」を div でラップし、両側でクリアします。以下のサンプルは、あなたが探していると私が信じている結果を達成します。純粋な CSS ではこれを達成できないと確信しています。フロートは、思い通りに機能しません。

<div id="container">
<div id="row_wrapper" style="clear:both;">
<div class="bit">10</div>
<div class="bit">11</div>
<div class="bit">12</div>
</div> <!--End row_wrapper -->

<div id="row_wrapper" style="clear:both;">
<div class="bit">1</div>
<div class="bit">2</div>
<div class="bit">3</div>
<div class="bit">4</div>
<div class="bit">5</div>
<div class="bit">6</div>
<div class="bit">7</div>
<div class="bit">8</div>
<div class="bit">9</div>
</div> <!--End row_wrapper -->
</div> <!--End container -->
于 2009-11-22T20:51:37.393 に答える