最新のブラウザと従来のブラウザ (Internet Explorer を含む) 間の互換性を確保して、順序なしリストを 2 つの列に表示するにはどうすればよいですか?

順序なしリストを 2 列で表示する

Web 開発の世界では、順序なしリストを複数列で表示するのが一般的な課題です。 Internet Explorer との互換性を確保しながら、2 つの列でこれを実現する方法を見てみましょう。

最新のブラウザ

最新のブラウザは、エレガントな CSS3 列モジュールをサポートしています。解決。次の CSS コードを組み込むだけで、複数列のリストを簡単に作成できます。

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

このアプローチでは、最新のブラウザーのネイティブ機能を利用して列のレイアウトを処理し、さまざまなデバイス間で一貫したエクスペリエンスを実現します。

レガシーブラウザ

残念ながら、Internet Explorer は CSS3 列をネイティブにサポートしていません。レガシー ブラウザをサポートするには、JavaScript と DOM 操作を使用したより複雑なアプローチが必要です。 jQuery を使用した 1 つの実装を以下に示します。

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

このソリューションは、指定された列数に基づいてリスト項目を列に動的に並べ替えます。ただし、従来のブラウザではレイアウトに制限が課せられ、最新のブラウザとは若干異なる表示になる可能性があることに注意することが重要です。

これらのアプローチを使用すると、順序なしリストを効果的に 2 列に表示でき、最新ブラウザと従来のブラウザの両方で、リスト コンテンツを構造化して整理して視覚化します。

以上が最新のブラウザと従来のブラウザ (Internet Explorer を含む) 間の互換性を確保して、順序なしリストを 2 つの列に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。