Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membuat susun atur senarai responsif dengan lajur pelarasan secara dinamik menggunakan CSS3?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-12 06:06:011047semak imbas

How to create a responsive list layout with dynamically adjusting columns using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn