Bagaimanakah Saya Boleh Menggunakan CSS untuk Memecahkan Senarai Halaman Web Panjang kepada Berbilang Lajur?

Memecahkan Senarai Halaman Web menjadi Lajur dengan CSS

Masalah:

Tingkatkan kebolehbacaan senarai menegak pada halaman web dengan membahagikannya kepada berbilang lajur.

Penyelesaian:

Penyelesaian CSS yang disyorkan menggunakan sifat kiraan lajur. Sifat ini membolehkan pembahagian senarai ke dalam lajur tertentu dengan jarak boleh laras.

ul {
  column-count: 4;
  column-gap: 20px;
}

Kod ini akan mencipta empat lajur dalam senarai, dengan jurang 20 piksel antaranya.

Keserasian:

Sokongan penyemak imbas untuk kiraan lajur meluas, tidak termasuk versi Internet Explorer 9 dan ke bawah.

Alternatif:

Untuk sokongan Internet Explorer, penyelesaian berasaskan JavaScript seperti Columnizer untuk jQuery boleh digunakan.

Sandaran untuk Internet Explorer:

Gunakan sandaran CSS, seperti apungan: kiri, untuk memaparkan item senarai secara mendatar dalam lajur untuk Internet Explorer.

<!--[if lt IE 10]>
<style>
li {
  width: 25%;
  float: left
}
</style>
<![endif]-->

Nota:

Sandaran CSS akan mengekalkan reka letak visual yang serupa tetapi mungkin mengganggu susunan item senarai.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan CSS untuk Memecahkan Senarai Halaman Web Panjang kepada Berbilang Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!