Bagaimana untuk Memaparkan Item Senarai sebagai Lajur dengan CSS3?

Memaparkan Item Senarai sebagai Lajur dengan Lajur CSS3

Bolehkah anda memaparkan senarai dalam baris atau lajur bergantung pada saiz skrin? Ini adalah cabaran biasa dalam reka bentuk web responsif. Walaupun jadual adalah pilihan, CSS3 menyediakan penyelesaian yang lebih elegan dengan sifat lajurnya.

Berikut ialah contoh struktur HTML:

<div>

Untuk memaparkan item senarai ini sebagai lajur, tambahkan CSS berikut :

#limheight {
  height: 300px; /* Your fixed height */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3; /* Number of columns */
}

#limheight li {
  display: inline-block; /* Necessary */
}

Hasilnya ialah tiga lajur item senarai, seperti yang ditunjukkan:

1   4   7
2   5   8
3   6   9

Laraskan nilai kiraan lajur untuk menukar bilangan lajur. Untuk responsif, anda boleh menggunakan pertanyaan media untuk bertukar antara reka letak satu lajur dan berbilang lajur berdasarkan saiz skrin.

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