Bagaimanakah saya boleh memaparkan item senarai secara menegak sebagai lajur menggunakan CSS?

Lajur CSS: Memaparkan Item Senarai Secara Menegak

Sebagai tindak balas kepada cabaran memaparkan item senarai secara menegak sebagai lajur, kami beralih kepada lajur CSS3. Ciri ini membolehkan kami mencapai reka letak yang diingini dengan mudah.

Pertimbangkan kod HTML berikut:

<div>

Sekarang, kami akan menambah CSS untuk menggayakannya:

#limheight {
    height: 800px; /* Fixed height */
    -webkit-column-count: 3; /* WebKit prefix */
    -moz-column-count: 3; /* Mozilla prefix */
    column-count: 3; /* Standard */
}

#limheight li {
    display: inline-block; /* Necessary for columns to work */
}

Dengan lajur CSS, bilangan lajur yang ditentukan (dalam kes ini, 3) dibuat secara automatik. Ia melaraskan lebar lajur secara dinamik semasa penyemak imbas mengubah saiz. Ini menyediakan barisan item senarai menegak yang diingini.

Nikmati kuasa lajur CSS untuk meningkatkan reka letak responsif anda dan memaparkan item senarai sebagai lajur dengan elegan!

Atas ialah kandungan terperinci Bagaimanakah saya boleh memaparkan item senarai secara menegak sebagai lajur menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!