使用CSS平衡两列布局

Question

我有以下页面：

<击> http://community.mediabrowser.tv/topics?category_id=5&status=published （样本不再相关，因为它包含修复）

它由一堆带有类部分的div组成，其中包含一个动态长度的ul（有些是短的，有些是长的）：

<div id='section'>
<ul>
  <li>an item</li>
  ....
</ul> 
</div> 

我想将div放在2列中并使列平衡。我不希望任何一列中出现任何不合适的空白。

如果您查看原始链接，向右（或向左）浮动和设置宽度不起作用。

这个问题有一个纯粹的CSS解决方案吗？如果失败了，是否有针对此问题的JavaScript解决方案？

Answer 1

纯粹的css：唯一的办法是绝对定位每个div。我最近使用了一个名为masonry的JQuery插件，它使用绝对定位来实现这种效果。

或者，你可以使用两个div，你的部分分开：

<div id="left">
 [3 or 4 sections]
</div>
<div id="right">
 [3 or 4 sections]
</div>

显然，这个解决方案预先假定你的部分大致可以分成两半。