Wie zeige ich eine ungeordnete Liste in zwei Spalten in modernen und älteren Browsern an?

So zeigen Sie eine ungeordnete Liste in zwei Spalten an

Einführung

Diese Frage untersucht Methoden zur Darstellung einer ungeordneten Liste in zwei Spalten, insbesondere zur Anzeige in älteren Browsern wie Internet Explorer.

Moderne Browser

In modernen Browsern ist die Das CSS3-Spaltenmodul bietet Unterstützung für die Erstellung von Spalten. Durch die Verwendung dieses Moduls können Sie das gewünschte Layout wie folgt erreichen:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

Legacy-Browser

Für Legacy-Browser ist eine JavaScript-basierte Lösung mit DOM-Manipulation erforderlich, wenn sich der Inhalt ändert. Diese Lösung verwendet jQuery für Kürze:

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;
}

Hinweis:
Zunächst Diese Lösung ordnet die Spalten wie folgt an:

A  E
B  F
C  G
D

Die ursprüngliche Frage forderte stattdessen eine Reihenfolge wie diese:

A  B
C  D
E  F
G

Passen Sie für diese Variante den folgenden JavaScript-Code an:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

Das obige ist der detaillierte Inhalt vonWie zeige ich eine ungeordnete Liste in zwei Spalten in modernen und älteren Browsern an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!