Wie zeige ich mit CSS und JavaScript eine ungeordnete Liste in zwei Spalten an?

Anzeigen einer ungeordneten Liste in zwei Spalten

Moderne Browser

Zum Anzeigen einer ungeordneten Liste in zwei Spalten in modernen Browsern , nutzen Sie die CSS3-Spalten Modul:

CSS:

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

[JSFiddle Demo](http://jsfiddle.net/HP85j/8/)

Legacy-Browser

Für die Internet Explorer-Unterstützung sind JavaScript und DOM-Manipulation erforderlich notwendig:

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 (jQuery):

(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: Die anfängliche JavaScript-Funktion ordnet die Spalten wie folgt an folgt:

A  E
B  F
C  G
D

So ordnen Sie die Spalten wie vom OP gefordert an:

A  B
C  D
E  F
G

Ändern Sie die updateColumns-Funktion wie folgt:

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 mit CSS und JavaScript eine ungeordnete Liste in zwei Spalten an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!