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