Bagaimana untuk Mencipta Tataletak Fluid Square dengan CSS Menggunakan Elemen Dummy?

Membuat Reka Letak Bendalir dengan Ketinggian Sama dengan Lebar

Dalam CSS, adalah mungkin untuk menetapkan ketinggian elemen secara dinamik supaya sama dengannya lebar, mencipta nisbah aspek berbentuk segi empat sama. Untuk mencapai matlamat ini, kami menggunakan teknik pintar yang dikenali sebagai kaedah "elemen dummy".

Langkah:

1. Tentukan elemen div bekas dengan paparan: sebaris -blok dan kedudukan: relatif.
2. Buat elemen "dummy" dalam bekas dengan jidar atas sama dengan 75%. Ini mewujudkan nisbah bidang 4:3.
3. Letakkan elemen mutlak dalam bekas (#elemen), yang akan mengisi ketinggian dan lebar bekas.

Contoh:

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}

<div>

Hasil:

Teknik ini berkesan mencipta susun atur bendalir di mana ketinggian div #elemen melaraskan secara dinamik berdasarkan lebar #bekas yang ditentukan div. Semasa anda mengubah saiz bekas, elemen itu mengekalkan perkadaran segi empat samanya.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tataletak Fluid Square dengan CSS Menggunakan Elemen Dummy?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!