CSS盒子不會從右下角浮動

Question

我一直在尋找這個解決方案一段時間... [bla bla ... google .. bla] ...

我已經創建了一個例子在那裏我幾乎沒有，但並不完全：

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

我已經離開了這裏是我想要的1號總是在右下角。只要我有一個單獨的塊行，就是這種情況，但是當行斷開時，行向上移動。我希望它保持下來。有什麼想法嗎？

Answer 1

如果元素被動態地添加到您的網頁（即使它們不是），它似乎是顯而易見的解決辦法是扭轉他們的順序。將超出容器邊界的元素將始終包裝在下面。找到一些可能會提供一些有關浮動和包裝的見解的鏈接。

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 -->