Bagaimanakah Saya Boleh Membuat Reka Letak Batu Menggunakan Hanya CSS?

Mencipta Reka Letak Gaya Batu Menggunakan CSS

Mencapai reka letak gaya batu, di mana unsur mempunyai ketinggian dan lebar yang berbeza-beza, semata-mata melalui CSS sudah lama menjadi cabaran. Dengan kemunculan CSS3, cabaran ini telah diatasi.

Penyelesaian CSS3

CSS3 memperkenalkan sifat kiraan lajur, yang membolehkan anda menentukan bilangan lajur dalam kandungan mana yang perlu dibentangkan. Dengan menggabungkan sifat ini dengan sifat ruang-jurang, yang mentakrifkan jarak antara lajur, adalah mungkin untuk membuat reka letak gaya batu.

.container {
  column-count: 2;
  column-gap: 10px;
  width: 360px;
}

.container div {
  display: inline-block;
  width: 100%;
  background-color: red;
}

Dalam kod ini, elemen .container mentakrifkan dua lajur dengan jurang 10px antara mereka. Elemen div .container dibentangkan dalam lajur ini, dengan setiap elemen menjangkau lebar penuh lajur.

Penyelesaian Bukan CSS3

Malangnya, untuk penyemak imbas yang tidak menyokong CSS3, reka letak gaya batu tidak boleh dicapai hanya melalui CSS. Dalam kes sedemikian, anda mungkin perlu menggunakan perpustakaan JavaScript untuk tujuan ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Reka Letak Batu Menggunakan Hanya CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!