mise en page équilibrée à deux colonnes en utilisant CSS

Question

je la page suivante:

http://community.mediabrowser.tv/topics?category_id=5&status=published (échantillon non plus pertinent car il contient un correctif)

Il est composé d'un groupe de divs avec le section de classe, qui contiennent une ul de longueur dynamique (certains sont courts et une longue):

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

je voudrais jeter les divs dans 2 colonnes et ont les colonnes balan ced. Je ne veux pas de trous hors de l'une des colonnes.

Si vous regardez le lien d'origine, le fait de flotter à droite (ou à gauche) et de régler la largeur ne fait pas l'affaire.

Existe-t-il une solution css pure à ce problème? A défaut, existe-t-il une solution javascript à ce problème?

Answer 1

Pur css: le seul moyen serait de positionner chaque div absolument. J'ai récemment utilisé un plugin JQuery appelé masonry qui utilise le positionnement absolu pour obtenir cet effet.

Vous pouvez également utiliser deux divs avec vos sections divisées entre elles:

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

Il est évident que, cette solution suppose vos sections peuvent être approximativement divisés en deux.