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

Memecahkan Senarai kepada Lajur dengan CSS

Membentangkan senarai yang panjang dan sempit dalam berbilang lajur boleh meningkatkan kebolehbacaan halaman web dan mengurangkan keperluan untuk menatal yang berlebihan. Artikel ini meneroka teknik CSS untuk menyelesaikan tugas ini.

Penyelesaian Berbilang Lajur CSS

Untuk penyemak imbas moden yang menyokong spesifikasi Berbilang Lajur CSS, anda boleh menggunakan yang berikut sifat:

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

Ini akan membahagikan senarai secara automatik kepada empat lajur dengan jurang 20px antara mereka.

JavaScript Fallback untuk IE

IE 9 dan lebih lama tidak menyokong reka letak berbilang lajur, jadi sandaran JavaScript diperlukan:

1. Gunakan pemalam jQuery seperti Columnizer (http://welcome.totheinter.net/columnizer-jquery-plugin/).
2. Laksanakan penyelesaian sandaran manual yang menggunakan float: left dan mengira lebar yang sesuai untuk setiap item senarai (seperti yang dilihat dalam http: //jsfiddle.net/NJ4Hw/).

Tambahan Nota

• Awalan -moz- dan -webkit- digunakan untuk keserasian dengan versi lama Firefox dan Safari.
• Penyelesaian sandaran mungkin tidak mengekalkan susunan yang betul bagi senaraikan item dalam IE.
• Pertimbangkan menggunakan alat ujian silang penyemak imbas untuk memastikan keserasian merentas pelayar.

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