Bolehkah Reka Letak Gaya Masonry Dicapai dengan CSS Sahaja?

Membuat Reka Letak Gaya Masonry dengan CSS

Dalam susun atur gaya batu, elemen disusun dalam lajur yang berbeza-beza ketinggian, mewujudkan visual paparan yang menarik dan dinamik. Biasanya, CSS dan JavaScript digunakan untuk mencapai kesan ini, tetapi adakah mungkin untuk mencapainya semata-mata dengan CSS?

Adakah Ia Mungkin dengan CSS?

Ya, dengan pengenalan ciri berbilang lajur CSS3, kini boleh dilakukan untuk mencipta reka letak gaya batu menggunakan CSS tulen. Kuncinya ialah untuk menetapkan kiraan lajur, jurang dan lebar untuk bekas.

Penyelesaian CSS3

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

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

Dalam contoh ini, ".container" menentukan reka letak dengan dua lajur dan jurang 10px di antaranya. Di dalam bekas, setiap elemen ".container div" disusun sebagai blok sebaris, mengambil 100% lebar dan berwarna merah.

Alternatif Tanpa CSS3

Jika Sokongan CSS3 tidak tersedia, penyelesaian berasaskan JavaScript diperlukan untuk mencapai reka letak gaya batu. Walau bagaimanapun, CSS3 menyediakan cara yang mudah dan cekap untuk mencipta reka letak ini tanpa menggunakan skrip luaran.

Atas ialah kandungan terperinci Bolehkah Reka Letak Gaya Masonry Dicapai dengan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!