Bagaimanakah Saya Boleh Membuat DIV Kanak-Kanak Lebih Luas Daripada Induknya Menggunakan CSS?

Memperluas Lebar DIV Kanak-kanak Melangkaui Sempadan Induk dengan CSS

Memperluaskan lebar DIV kanak-kanak di luar bekas induknya boleh dilakukan menggunakan CSS. Ini membolehkan DIV kanak-kanak merentangi seluruh port pandangan penyemak imbas.

Penyelesaian Generik

Untuk mencapainya, gunakan sifat CSS berikut pada elemen anak:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

• lebar: 100vw; menetapkan lebar kanak-kanak kepada 100% daripada port pandangan, merentangi tetingkap penyemak imbas penuh.
• kedudukan: relatif; memastikan kedudukan kanak-kanak adalah relatif kepada ibu bapanya, membenarkan pelarasan.
• kiri: calc(-50vw 50%); mengimbangi tepi kiri kanak-kanak sebanyak 50% daripada port pandangan tolak 50% daripada lebar ibu bapa, menjajarkannya dengan sempadan kiri penyemak imbas.

Contoh

<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
}

.child {
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
}

Contoh ini mencipta DIV induk selebar 400px dan anak DIV yang memanjangkan keseluruhan lebar port pandangan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat DIV Kanak-Kanak Lebih Luas Daripada Induknya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!