Bagaimanakah saya boleh memaparkan senarai tidak tersusun dalam dua lajur, memastikan keserasian merentas pelayar moden dan lama (termasuk Internet Explorer)?

Memaparkan Senarai Tidak Tersusun dalam Dua Lajur

Dalam dunia pembangunan web, memaparkan senarai tidak tersusun dalam berbilang lajur ialah cabaran biasa. Mari kita terokai cara untuk mencapai ini dalam dua lajur, memastikan keserasian dengan Internet Explorer.

Pelayar Moden

Pelayar moden menyokong modul lajur CSS3, yang menyediakan modul yang elegan penyelesaian. Dengan hanya memasukkan kod CSS berikut, anda boleh membuat senarai berbilang lajur dengan mudah:

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

Pendekatan ini memanfaatkan keupayaan asli penyemak imbas moden untuk mengendalikan reka letak lajur, menghasilkan pengalaman yang konsisten merentas peranti yang berbeza.

Legasi Pelayar

Malangnya, Internet Explorer tidak menyokong lajur CSS3 secara asli. Untuk menyokong pelayar lama, pendekatan yang lebih terlibat menggunakan JavaScript dan manipulasi DOM diperlukan. Satu pelaksanaan menggunakan jQuery digambarkan di bawah:

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

Penyelesaian ini menyusun semula item senarai secara dinamik ke dalam lajur berdasarkan bilangan lajur yang ditentukan. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa penyemak imbas lama mungkin mengenakan pengehadan pada reka letak, yang berpotensi menghasilkan paparan yang berbeza sedikit daripada penyemak imbas moden.

Dengan pendekatan ini, anda boleh memaparkan senarai tidak tertib dalam dua lajur dengan berkesan, memberikan visualisasi kandungan senarai yang tersusun dan teratur untuk penyemak imbas moden dan lama.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memaparkan senarai tidak tersusun dalam dua lajur, memastikan keserasian merentas pelayar moden dan lama (termasuk Internet Explorer)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!