javascript - float 的列样式对齐

Question

HTML:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

我想要由元素 1 到 3、4 到 6 和 7 到 9 组成的三列。正如您在 fiddle 中看到的那样，我已经设法创建了前两列。然而第三根柱子竟然倒下了？有谁知道为什么深红色框不是从容器的右上角开始，即使它们是向右浮动的？

http://jsfiddle.net/AleKS/e8G2C/

编辑:我应该澄清一下，HTML 不能更改!

EDIT2:JS 解决方案也可以，但不应太长。

Answer 1

Does anybody know why the crimson boxes are not starting at the top right corner of the container even though they are floated right ?

是的 - 当您 float 元素时，它们不会自动向上移动。它们向左或向右浮动，但处于与不 float 时相同的垂直高度。如果你从这些 div 中移除 float ，你可以看到它们的自然位置在其他元素的下方，所以即使它们向右浮动后它们也会停留在那里。

如果你真的想做你想做的事，你需要改变 HTML 结构(添加一些列 div)。