Comment afficher une liste non ordonnée sur deux colonnes dans les navigateurs modernes et anciens ?

Comment afficher une liste non ordonnée sur deux colonnes

Introduction

Cette question explore les méthodes permettant de présenter une liste non ordonnée sur deux colonnes, en particulier pour l'affichage dans les navigateurs existants comme Internet Explorer.

Navigateurs modernes

Dans les navigateurs modernes, le module de colonnes CSS3 prend en charge la création de colonnes. En utilisant ce module, vous pouvez obtenir la mise en page souhaitée comme suit :

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

Navigateurs hérités

Pour les navigateurs existants, une solution basée sur JavaScript impliquant une manipulation DOM est nécessaire lorsque le contenu change. Cette solution utilise jQuery pour brièveté :

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

Remarque :
Initialement, cette solution ordonnera les colonnes comme suit :

A  E
B  F
C  G
D

La question d'origine demandait plutôt un ordre comme celui-ci :

A  B
C  D
E  F
G

Pour cette variante, ajustez le code JavaScript suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!