Bagaimanakah Saya Boleh Membuat Senarai Berbilang Lajur dengan CSS?

Membentangkan Senarai dalam Lajur Menggunakan CSS

Jika anda mempunyai senarai panjang dengan item pendek yang ingin anda paparkan dalam format yang lebih padat, pertimbangkan untuk membahagikannya kepada lajur. CSS menyediakan penyelesaian yang mudah untuk ini.

Reka Letak Berbilang Lajur CSS

Modul Reka Letak Berbilang Lajur CSS membolehkan anda menentukan bilangan lajur untuk dibuat dalam unsur. Begini cara menggunakannya:

ul {
    column-count: 4;  /* The number of columns */
    column-gap: 20px; /* Space between columns */
}

Kod ini akan memaparkan senarai dalam empat lajur dengan jurang 20px di antaranya.

Sokongan Penyemak Imbas

Css Multi-Column Layout disokong oleh semua pelayar moden kecuali Internet Explorer 9 atau lebih lama.

Alternatif untuk Internet Explorer

Jika anda memerlukan sokongan Internet Explorer, anda boleh menggunakan penyelesaian JavaScript seperti pemalam Columnizer jQuery.

Fallback to Float for Internet Explorer

Sebagai sandaran, anda boleh menggunakan CSS terapung untuk mencapai susun atur yang serupa dalam Internet Explorer. Walau bagaimanapun, kaedah ini akan mengekalkan susunan item tetapi bukan struktur lajur.

li {
    width: 25%;
    float: left
}

Nota: Sandaran ini boleh digunakan dengan Modernizr atau teknik pemuatan bersyarat yang serupa untuk menyasarkan Internet Explorer sahaja .

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