How to Display an Unordered List in Two Columns Across Modern and Legacy Browsers?

How to Display an Unordered List in Two Columns

Introduction

This question explores methods for presenting an unordered list across two columns, particularly for display in legacy browsers like Internet Explorer.

Modern Browsers

In modern browsers, the CSS3 columns module provides support for creating columns. By utilizing this module, you can achieve the desired layout as follows:

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

Legacy Browsers

For legacy browsers, a JavaScript-based solution involving DOM manipulation is necessary when the content changes. This solution employs jQuery for brevity:

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

Note:
Initially, this solution will order the columns as follows:

A  E
B  F
C  G
D

The original question requested an ordering like this instead:

A  B
C  D
E  F
G

For this variant, adjust the following JavaScript code:

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

The above is the detailed content of How to Display an Unordered List in Two Columns Across Modern and Legacy Browsers?. For more information, please follow other related articles on the PHP Chinese website!