我有一堆包含文本信息的 DIV。它们都是相同的宽度(可能是 400 像素左右),但高度不同。出于空间原因,我希望有两到三列这些 DIV(有点像报纸上的广告部分)。请参阅下面有吸引力的 ascii-art :)
DIV1 DIV3
DIV1 DIV3
DIV1
DIV1 DIV4
DIV1 DIV4
DIV1 DIV4
DIV4
DIV2 DIV4
DIV2
DIV 是 javascript 驱动的,并在页面加载时更改高度。我也不应该更改它们的顺序(每个 DIV 都有一个标题,它们按字母顺序排序)。
到目前为止,我还没有找到一个好的方法来做到这一点。HTML 流程是从左到右,然后从上到下,但我需要从上到下,然后从左到右。
我尝试了一个包含两列的表的简单实现,并将 DIV 放在一列中,另一半放在另一列中。有时间看起来很合理(当每列中 DIV 的平均高度接近时),另一半看起来很糟糕。
我想如果我是 javascript 大师,我可以在 DIV 扩展后测量它们,将它们加起来,然后在运行时将它们从一个表列移动到另一个......但这超出了我的能力,我不确定无论如何都是可能的。
有什么建议么?
谢谢
更新:
感谢您的评论。很明显我问这个问题做得不好:(
DIV 只是包含/分组相似内容的一种方式——并没有真正将它们用于布局本身。它们的宽度相同,但高度不同。我想把它们吐在一个页面上,神奇地:) 将它们排列成两列,两列的高度几乎相同 - 就像报纸专栏一样。我不知道开始时 DIV 有多高,所以我不知道将每个 DIV 放在哪一列(这意味着如果我知道它们的高度,我会将它们分成两个表格单元格,但我不知道不知道)。所以上面的例子只是一个简单的例子——它可能在运行时证明 DIV 1 大于其他 3 的组合(在这种情况下 DIV2 应该浮动到 column2 的顶部),或者 DIV 4 可能是大的(在这种情况下,DIV 1、2 和 3 都在 column1 中,而 DIV4 可以单独在 column2 中)
基本上,我希望有一种方法可以创建两列,并根据需要让内容从 column1神奇地流向 column2(就像 Word 一样)。我怀疑这无法完成,但我的 HTML/CSS 知识非常基础,所以也许......?