Comment puis-je afficher des listes non ordonnées sur deux colonnes, garantissant ainsi la compatibilité avec les navigateurs modernes et existants (y compris Internet Explorer) ?

Affichage de listes non ordonnées sur deux colonnes

Dans le monde du développement Web, l'affichage de listes non ordonnées sur plusieurs colonnes est un défi courant. Explorons comment y parvenir dans deux colonnes, garantissant la compatibilité avec Internet Explorer.

Navigateurs modernes

Les navigateurs modernes prennent en charge le module de colonnes CSS3, qui fournit un élégant solution. En incluant simplement le code CSS suivant, vous pouvez facilement créer des listes multi-colonnes :

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

Cette approche exploite les capacités natives des navigateurs modernes pour gérer la disposition des colonnes, ce qui se traduit par une expérience cohérente sur différents appareils.

Navigateurs hérités

Malheureusement, Internet Explorer ne prend en charge nativement les colonnes CSS3. Pour prendre en charge les navigateurs existants, une approche plus impliquée utilisant la manipulation JavaScript et DOM est requise. Une implémentation utilisant jQuery est illustrée ci-dessous :

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

(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);

.columns {
  float: left;
  position: relative;
  margin-right: 20px;
}

Cette solution réorganise dynamiquement les éléments de la liste en colonnes en fonction du nombre de colonnes spécifié. Cependant, il est important de noter que les navigateurs existants peuvent imposer des limitations sur la mise en page, ce qui peut entraîner un affichage légèrement différent de celui des navigateurs modernes.

Avec ces approches, vous pouvez afficher efficacement des listes non ordonnées sur deux colonnes, offrant ainsi un visualisation structurée et organisée du contenu de la liste pour les navigateurs modernes et existants.

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!