Bagaimana untuk Membuat Senarai Tidak Tertib Dua Lajur Menggunakan CSS dan JavaScript?

Cara Memaparkan Senarai Tidak Tertib dalam Dua Lajur

Untuk memaparkan senarai tidak tersusun sebagai dua lajur, terdapat berbilang pendekatan bergantung pada penyemak imbas keperluan keserasian.

Moden Pelayar:

CSS3 menyediakan modul lajur, yang membolehkan reka letak berbilang lajur dibuat dengan mudah. Dengan kod CSS berikut, anda boleh membahagikan senarai kepada dua lajur:

ul {
  columns: 2;
}

Pelayar Warisan:

Internet Explorer tidak menyokong modul lajur CSS3. Untuk IE, penyelesaian kod JavaScript diperlukan untuk menyusun semula senarai secara dinamik ke dalam lajur:

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

Nota: Kod JavaScript pada mulanya akan menyusun lajur sebagai:

• A E
• B F
• C G
• D

Untuk menjajarkannya secara mendatar seperti yang diminta oleh OP:

• A B
• C D
• E F
• G

ubah suai fungsi updateColumns() kepada:

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

Atas ialah kandungan terperinci Bagaimana untuk Membuat Senarai Tidak Tertib Dua Lajur Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!