Bagaimana untuk Memaparkan Item Senarai dalam Lajur dengan Reka Letak Responsif?

Memaparkan Item Senarai sebagai Lajur dalam Reka Letak Responsif

Matlamat anda untuk memaparkan item senarai secara menegak, bergantung pada lebar penyemak imbas, boleh dicapai menggunakan lajur CSS3. Begini caranya:

Menggunakan HTML, bungkus item senarai anda dalam <div> dengan ketinggian tetap dan nyatakan bilangan lajur menggunakan sifat kiraan lajur:

<div>

Dalam CSS, tentukan ketinggian bekas dan pastikan setiap item senarai dipaparkan dalam blok sebaris:

#limheight {
  height: 800px;
  column-count: 3;
}

#limheight li {
  display: inline-block;
}

Apabila pelayar diubah saiz, CSS3 akan melaraskan bilangan lajur secara automatik dan menyusun semula item senarai untuk mengoptimumkan paparannya. Bilangan lajur tertentu yang dipaparkan akan bergantung pada lebar yang tersedia dan lebar item senarai itu sendiri.

Menggunakan teknik ini, anda boleh mencapai reka letak responsif di mana item senarai dipaparkan dalam garis menegak, dengan lajur melaraskan secara dinamik berdasarkan saiz penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Item Senarai dalam Lajur dengan Reka Letak Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!