Navigateurs modernes
exploitez le module de colonnes css3 pour prendre en charge ce que vous recherchez.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
http://jsfiddle.net/HP85j/8/
Navigateurs hérités
Malheureusement, pour le support d'IE, vous aurez besoin d'une solution de code qui implique la manipulation de JavaScript et de dom. Cela signifie qu'à chaque fois que le contenu de la liste change, vous devrez effectuer l'opération de réorganisation de la liste en colonnes et de réimpression. La solution ci-dessous utilise jQuery pour plus de concision.
http://jsfiddle.net/HP85j/19/
HTML:
<div>
<ul class="columns" data-columns="2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
JavaScript:
(function($){
var initialContainer = $('.columns'),
columnItems = $('.columns li'),
columns = null,
column = 1; // account for initial column
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
column += 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns(){
columnItems.detach();
while (column++ < initialContainer.data('columns')){
initialContainer.clone().insertBefore(initialContainer);
column++;
}
columns = $('.columns');
}
$(function(){
setupColumns();
updateColumns();
});
})(jQuery);
CSS:
.columns{
float: left;
position: relative;
margin-right: 20px;
}
ÉDITER:
Comme indiqué ci-dessous, les colonnes seront ordonnées comme suit:
A E
B F
C G
D
tandis que le PO a demandé une variante correspondant à ce qui suit:
A B
C D
E F
G
Pour accomplir la variante, vous changez simplement le code comme suit:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}
