Mengapa Menetapkan Lebar Tidak Menghalang Div daripada Mengecut untuk Menyesuaikan Kandungan Melimpah?

Mengapa Baris Pertama Tidak Menghalang Div daripada Mengecut?

Dalam contoh mudah halaman web, div dalam dengan kandungan yang berlebihan melimpah dan terlepas daripada yang mengandungi div luar. Walaupun percubaan untuk mengehadkan div dalam, ia terus melimpah apabila bekas diubah saiz kepada lebar yang sempit. Artikel ini menyiasat sebab di sebalik tingkah laku ini dan menyediakan penyelesaian.

Memahami Elemen Blok dan Elemen Blok Sebaris

Pada mulanya, div luar mempunyai lebar yang ditentukan, tetapi apabila kandungan div dalam melebihinya , div luar mengecut untuk menampung div dalam yang semakin meningkat. Ini berlaku kerana div luar ialah elemen blok, bermakna lebarnya ditentukan oleh bekas induk.

Pendekatan Blok Sebaris

Untuk menyelesaikan tingkah laku ini, seseorang boleh menggunakan elemen blok sebaris , yang secara lalai mempunyai lebarnya ditentukan oleh kandungannya. Dengan memperuntukkan paparan: blok sebaris kepada div luar, lebarnya menjadi bebas daripada bekas induknya.

Memastikan Paparan Lebar Penuh

Walau bagaimanapun, walaupun dengan blok sebaris, div luar mungkin tidak selalu dipaparkan pada lebar penuhnya. Untuk memastikan ia mengembang sepenuhnya, gunakan lebar min: 100%. Ini memastikan div luar memenuhi ruang yang tersedia, menghalang div dalam daripada melarikan diri.

Ringkasan

Dengan menggabungkan paparan: blok sebaris dan lebar min: 100% pada div luar, anda boleh mengawal lebarnya secara bebas daripada bekas induknya dan menjamin bahawa ia merangkumi div dalam tanpa limpahan. Pendekatan ini menyelesaikan isu div dalam yang bocor di luar div luar yang mengandungi.

Atas ialah kandungan terperinci Mengapa Menetapkan Lebar Tidak Menghalang Div daripada Mengecut untuk Menyesuaikan Kandungan Melimpah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!