Mengapa Kandungan Saya Tidak Menghalang Div Induk daripada Runtuh?-tutorial css-php.cn

Why Doesn't My Content Prevent a Parent Div from Collapsing?

Mengapa Kandungan Tidak Menghalang Div Induk daripada Mengecut?

Dalam kod HTML yang disediakan,

mengalir keluar dari

apabila saiz tetingkap diubah kepada saiz yang sempit. Tingkah laku ini berlaku, walaupun

mempunyai lebar tertentu dan

mengandungi sejumlah besar kandungan.

Isu asas ialah

ditetapkan sebagai elemen peringkat blok secara lalai. Ini bermakna ia mengambil keseluruhan lebar yang tersedia bagi elemen induknya. Walaupun dengan kandungan di dalam, bahagian luar

boleh mengecil untuk menampung saiz tingkap.

Menggabungkan Inline-Block dan Min-Width

Untuk mengelakkan

daripada mengecut, anda boleh menggabungkan sifat berikut:

1. Blok sebaris: Ini membenarkan

untuk berkelakuan seperti elemen sebaris, mengambil hanya lebar yang diperlukan agar sesuai dengan kandungannya.

2. Lebar min:100%: Ini memastikan bahawa

mempunyai lebar minimum bersamaan dengan 100% elemen induknya. Ini menghalangnya daripada mengecut di bawah lebar kandungannya.

Kod Kemas Kini

Berikut ialah kod CSS yang dikemas kini dengan perubahan yang disyorkan:

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

Salin selepas log masuk

Dengan perubahan ini berlaku , bahagian luar

kini akan kekal sekurang-kurangnya selebar kandungannya, tanpa mengira lebar tetingkap.

Atas ialah kandungan terperinci Mengapa Kandungan Saya Tidak Menghalang Div Induk daripada Runtuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Apakah Perbezaan Antara SCSS dan Sass? Artikel seterusnya：Mengapakah Sifat Grid CSS Saya Tidak Mempengaruhi Elemen Senarai Bersarang?

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

2708

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

2833

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

2387

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