Bagaimana untuk Mencipta Div Square Responsif dengan Tinggi dan Lebar Sama?

Div Square Responsif dengan Tinggi dan Lebar Sama

Matlamat anda ialah untuk mencipta elemen div yang melaraskan ketinggiannya secara automatik agar sepadan dengan lebarnya, tanpa mengira saiz elemen induk. Untuk mencapai matlamat ini, CSS mempunyai penyelesaian yang mudah dan berkesan:

Menggunakan Peratusan Padding-Bottom:

Tambah CSS berikut pada div anda:

height: 0;
width: 20%;
padding-bottom: 20%;
background-color: red;

Begini cara ia berfungsi:

• Tetapkan ketinggian kepada 0, menjadikan div pada mulanya runtuh.
• Nyatakan peratusan lebar (cth., 20%).
• Tetapkan padding-bottom kepada peratusan yang sama dengan lebar. Ini menentukan ketinggian div.
• Warna latar belakang ditambah untuk menjadikan segi empat sama kelihatan.

Div Bersarang Pilihan:

Untuk lebih fleksibiliti dalam peletakan kandungan, pertimbangkan untuk membuat div bersarang dalam div segi empat sama. Ini membolehkan anda memusatkan atau menjajarkan kandungan mengikut keperluan.

<div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Square Responsif dengan Tinggi dan Lebar Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!