css - 使用 CSS 平衡两列布局

Question

我有以下页面:

<罢工> http://community.mediabrowser.tv/topics?category_id=5&status=published (示例不再相关，因为它包含修复)

由一堆div和class部分组成，其中包含一个ul的动态长度(有的短有的长):

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

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

如果您查看原始链接，向右(或向左) float 和设置宽度并不能解决问题。

是否有解决此问题的纯 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>

很明显，此解决方案假定您的部分可以大致分为两半。