css - 如何按时间顺序在两列中堆叠不同高度的 div？

Question

我有两列，想按外观顺序堆叠不同高度的 div。

div 是动态创建的。

我试图通过将第一个故事浮动到左边和第二个到右边来做到这一点，但它们似乎仍然有些异常。

看看这个演示，它应该解释了一切。

http://dl.getdropbox.com/u/142343/divstack.html

Answer 1

我不确定这是否是您想要的效果，但请尝试使用

.left {
  float:left;
  clear:both;
}
.right {
  float:left;
}

作为左右的CSS。

Answer 2

Try to use "clear:left" for floated to left and "clear:right" for floated to right.

You cannot create two columns without empty space between with that HTML structure.

If you want two columns without empty space, then you need to generate different structure - place odd elements in one column and even in other.

Answer 3

Put them in a table with two cells. (Yes, yes, flame away!)

Added: To clarify: what I meant was this:

<table>
    <tr>
        <td>
            <div>First DIV</div>
            <div>Third DIV</div>
            <div>Fifth DIV</div>
        </td>
        <td>
            <div>Second DIV</div>
            <div>Fourth DIV</div>
            <div>Sixth DIV</div>
        </td>
    </tr>
</table>

Throw in some width and padding settings, and you'll have two neat little stacks.

Now, looking at your examples I think I realized something else yet. You want the <div>'s to arrange automatically in such a way that both stacks are as equally sized as possible. I don't think that's possible.

Well, you might try to render them, and then check their heights with JS, and rearrange them... but this will cause some nasty flickering in the browser.

Added 2: Check the link: http://valts.21.lv/problem/DivStack.html