Сбалансированный двухколонный макет с использованием 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 абсолютно. Недавно я использовал плагин JQuery под названием masonry , который использует абсолютное позиционирование для достижения этого эффекта.

В качестве альтернативы, вы можете использовать два элемента div с разделенными между ними разделами:

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

Очевидно, что это решение предполагает, что ваши разделы могут быть приблизительно разделены пополам.