Moderne Browser
Nutzen Sie das CSS3-Spaltenmodul, um das zu unterstützen, wonach Sie suchen.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
http://jsfiddle.net/HP85j/8/
Legacy-Browser
Leider benötigen Sie für die IE-Unterstützung eine Codelösung, die JavaScript- und Dom-Manipulationen umfasst. Dies bedeutet, dass Sie jedes Mal, wenn sich der Inhalt der Liste ändert, den Vorgang zum Neuordnen der Liste in Spalten und zum erneuten Drucken ausführen müssen. Die folgende Lösung verwendet der Kürze halber jQuery.
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;
}
BEARBEITEN:
Wie unten ausgeführt, werden die Spalten wie folgt angeordnet:
A E
B F
C G
D
während das OP nach einer Variante fragte, die der folgenden entspricht:
A B
C D
E F
G
Um die Variante zu erreichen, ändern Sie einfach den Code wie folgt:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}
