Bagaimana Saya Boleh Menjadikan DIV Kanak-kanak Lebih Luas Daripada Induknya dalam CSS?

Memperluaskan Lebar DIV Kanak-kanak Melebihi Had Ibu Bapa

Dalam CSS, secara amnya tidak digalakkan untuk menjadikan DIV kanak-kanak lebih luas daripada induknya. Walau bagaimanapun, jika anda mendapati diri anda dalam situasi sedemikian, terdapat beberapa penyelesaian yang boleh anda gunakan.

Pilihan 1: Menggunakan Kedudukan Mutlak

Jika anak DIV boleh dialih keluar daripada aliran dokumen, anda boleh menggunakan kedudukan mutlak untuk menetapkan lebarnya kepada 100% daripada port pandangan penyemak imbas. Ingat untuk menetapkan kiri dan kanan kepada 0 untuk meregangkan kanak-kanak secara mendatar dari tepi ke tepi.

Pilihan 2: Penyelesaian Generik dengan Margin Boleh Dikira

Untuk memastikan kanak-kanak DIV dalam aliran dokumen, anda boleh mengira margin negatif untuk mencapai lebar yang diingini:

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

Penyelesaian ini memastikan bahawa kanak-kanak DIV kekal dalam induknya sambil memanjangkan lebarnya untuk mengisi ruang pandang. Dalam formula ini:

• -50vw menggerakkan DIV kanak-kanak ke kiri dengan separuh lebar port pandangan
• 50% mengimbangi pergerakan ini dengan menambah separuh lebar induk

Pertimbangan dengan Relatif Kedudukan

Jika DIV induk mempunyai kedudukan: relatif, sifat kiri dan kanan DIV anak adalah relatif kepada ibu bapa. Untuk mengelakkan perkara ini, anda boleh menggunakan sifat transform untuk menterjemah DIV anak:

.child {
  ...
  transform: translate(-50%, 0);
}

Ini memastikan DIV anak melangkaui batas ibu bapa sambil menghormati bekasnya.

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