javascript - 在 HTML/CSS 中实现列

Question

我有一堆包含文本信息的 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 应该 float 到 column2 的顶部)，或者 DIV 4 结果可能是大的(在这种情况下，DIV 1、2 和 3 都在第 1 列中，而 DIV4 可能单独在第 2 列中)

基本上，我希望有一种方法可以创建两列，并让内容神奇地根据需要从第 1 列流到第 2 列(就像 Word 那样)。我怀疑这不可能完成，但我的 HTML/CSS 知识非常基础，所以也许...？

Answer 1

草稿CSS3 multi-column model做你想做的事。 Firefox 似乎支持 -moz versions of some of the properties和 Safari/Chrome -webkit versions ;我不知道 IE8 或 Opera。