Wie kann ich ungeordnete Listen in zwei Spalten anzeigen und so die Kompatibilität mit modernen und älteren Browsern (einschließlich Internet Explorer) sicherstellen?

Anzeige ungeordneter Listen in zwei Spalten

In der Welt der Webentwicklung ist die Anzeige ungeordneter Listen in mehreren Spalten eine häufige Herausforderung. Lassen Sie uns untersuchen, wie Sie dies in zwei Spalten erreichen und dabei die Kompatibilität mit Internet Explorer sicherstellen können.

Moderne Browser

Moderne Browser unterstützen das CSS3-Spaltenmodul, das eine elegante Lösung. Durch einfaches Einfügen des folgenden CSS-Codes können Sie mühelos mehrspaltige Listen erstellen:

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

Dieser Ansatz nutzt die nativen Funktionen moderner Browser zur Verwaltung des Spaltenlayouts, was zu einem konsistenten Erlebnis auf verschiedenen Geräten führt.

Alte Browser

Leider funktioniert Internet Explorer nicht nativ unterstützen CSS3-Spalten. Um ältere Browser zu unterstützen, ist ein komplexerer Ansatz mit JavaScript und DOM-Manipulation erforderlich. Eine Implementierung mit jQuery ist unten dargestellt:

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

Diese Lösung ordnet die Listenelemente basierend auf der angegebenen Anzahl von Spalten dynamisch in Spalten um. Es ist jedoch wichtig zu beachten, dass ältere Browser möglicherweise Einschränkungen beim Layout auferlegen, was möglicherweise dazu führt, dass die Anzeige leicht von der moderner Browser abweicht.

Mit diesen Ansätzen können Sie ungeordnete Listen effektiv in zwei Spalten anzeigen und so eine... Strukturierte und organisierte Visualisierung von Listeninhalten für moderne und ältere Browser.

Das obige ist der detaillierte Inhalt vonWie kann ich ungeordnete Listen in zwei Spalten anzeigen und so die Kompatibilität mit modernen und älteren Browsern (einschließlich Internet Explorer) sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!