CSS 框不会从右下角浮动答案

【问题标题】：CSS boxes will not float from lower right cornerCSS 框不会从右下角浮动
【发布时间】：2026-01-23 23:40:01
【问题描述】：

我一直在寻找这个解决方案一段时间... [bla bla... google.. bla]...

我已经创建了一个示例，我几乎在那里，但不完全：

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

我在这里留下的是我希望数字 1 始终位于右下角。只要我有一个单行块就是这种情况，但是当行中断时，该行会向上移动。我希望它保持低调。有什么想法吗？

【问题讨论】：

这些元素是否被动态添加到您的页面中？
查看我所做的编辑。看看有没有帮助。

标签： css vertical-alignment css-float

【解决方案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 -->

【讨论】：

是的，我的 div 已生成，但不会改变第二行应该在第一行之上。我已经阅读了链接并且有有用的信息，但没有什么能让我解决这个问题。无论如何，谢谢，我会继续阅读，看看我是否能解决这个问题。
我将在今天晚些时候尝试这个解决方案。我有条件地生成这些 div，所以我可以将这些包装器挤进去，这取决于我每行有多少个盒子等。非常感谢你抽出时间帮助我。
我现在已经实现了这个，并且在 php 代码中以非常奇怪的顺序生成点之后（如上面的示例），它像它应该的那样浮动。非常感谢:)
没问题。很高兴我能帮上忙。