Mengapa Div Luar Saya Runtuh Apabila Mengubah Saiz Tetingkap Penyemak Imbas?-tutorial css-php.cn

Why Does My Outer Div Collapse When Resizing the Browser Window?

Mengapa Bahagian Luar Tidak

Mengelilingi Sepenuhnya

Apabila Saiz semula?

Dalam bekas dengan

dalam dan luar,

luar; tiba-tiba runtuh kepada lebar yang lebih kecil daripada kandungan

dalam. Isu ini boleh dikaitkan dengan sifat elemen blok.

Elemen sekat biasanya mengambil lebar sebanyak bekas induknya. Apabila tetingkap diubah saiz kepada lebar yang lebih sempit, bahagian luar

mula-mula mengembang untuk menampung kandungan

dalam. Walau bagaimanapun, apabila lebar tetingkap semakin berkurangan, lebar

luar akhirnya menjadi lebih kecil daripada

dalam.

Untuk menangani isu ini, gabungan blok sebaris dan min. -lebar: 100% boleh digunakan. inline-block membenarkan elemen untuk bertindak sebagai elemen inline dan block. Dengan menetapkan lebar min:100%, bahagian luar

akan memastikan lebarnya sentiasa sekurang-kurangnya sama dengan lebar kandungannya.

Kod Kemas Kini

Dengan menambahkan paparan: blok sebaris dan lebar min: 100% pada luar

, kandungan

dalam; akan berjaya menghalang

daripada mengecut lebih kecil daripada lebar kandungannya apabila mengubah saiz tetingkap.

.demo {
  display: inline-block;
  min-width: 100%;
}

Salin selepas log masuk

Atas ialah kandungan terperinci Mengapa Div Luar Saya Runtuh Apabila Mengubah Saiz Tetingkap Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Bagaimanakah Saya Boleh Mensimulasikan Kesan Tuding pada Peranti Sentuh? Artikel seterusnya：Mengapa Elemen Melekit Saya Tidak Berfungsi dalam Bekas Flexbox?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2785

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2920

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2439

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...