CSS と JavaScript を使用して 2 列の順序なしリストを作成する方法

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

順序なしリストを 2 列で表示するには、ブラウザーに応じて複数の方法があります。互換性要件。

モダンブラウザ:

CSS3 は、複数列のレイアウトを簡単に作成できる列モジュールを提供します。次の CSS コードを使用すると、リストを 2 つの列に分割できます:

ul {
  columns: 2;
}

レガシー ブラウザ:

Internet Explorer は CSS3 列モジュールをサポートしていません。 IE の場合、リストを列に動的に再構築するには、JavaScript コード ソリューションが必要です:

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

<script>
  (function($) {
    // JavaScript code to create the two-column layout
  })(jQuery);
</script>

注: JavaScript コードは、最初に列を次のように並べ替えます:

• A E
• B F
• C G
• D

OP の要求に従って水平に整列するには:

• A B
• C D
• E F
• G

updateColumns() 関数を次のように変更します:

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

以上がCSS と JavaScript を使用して 2 列の順序なしリストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。