Question

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

div是动态创建的。

我试图通过将第一个故事向左移动而第二个向右移动来做到这一点，但它们似乎仍然存在一些异常现象。

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

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

Answer 1

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

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

作为左右的CSS。

Answer 2

尝试使用“clear：left”浮动到左边，“clear：right”浮动到右边。

您不能在该HTML结构之间创建两个没有空格的列。

如果你想要两个没有空格的列，那么你需要生成不同的结构 - 将奇数元素放在一列中，甚至放在另一列中。

Answer 3

将它们放在一个有两个单元格的表中。（是的，是的，火焰消失！）

添加：澄清：我的意思是：

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

抛出一些宽度和填充设置，你将有两个整齐的小堆栈。

现在，看看你的例子我觉得我还意识到了其他的东西。您希望<div>自动排列，使两个堆栈的大小尽可能相同。我不认为这是可能的。

好吧，你可能会尝试渲染它们，然后用JS检查它们的高度，并重新排列它们......但这会在浏览器中引起一些讨厌的闪烁。

已添加2：检查链接： http://valts.21.lv/problem/DivStack.html

我怎样才能按时间顺序在两列中堆叠不同的高度div？

3 个答案: