Bagaimana untuk membuat susun atur senarai responsif dengan lajur pelarasan secara dinamik menggunakan CSS3?

Memaparkan Item Senarai dalam Lajur menggunakan CSS3

Pernyataan Masalah:

Membina reka letak responsif memerlukan paparan item senarai secara menegak, dengan bilangan lajur ditentukan oleh lebar penyemak imbas.

Penyelesaian CSS3:

Lajur CSS3 menyediakan penyelesaian yang cekap untuk reka letak ini:

#limheight {
    height: 300px; /* Define the container's height */
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /* Specify the desired number of columns */
}

#limheight li {
    display: inline-block; /* Ensure each list item is treated as a block element */
}

Contoh:

<ul>

Apabila tetingkap penyemak imbas cukup luas, item senarai akan dipaparkan dalam tiga lajur:

1  4  7
2  5  8
3  6  9

Apabila tetingkap penyemak imbas mengecil, lajur akan melaraskan secara dinamik untuk mengekalkan reka letak yang menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk membuat susun atur senarai responsif dengan lajur pelarasan secara dinamik menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!