Rumah >hujung hadapan web >tutorial css >Mengapa Kandungan Saya Tidak Menghalang Div Induk daripada Runtuh?
Mengapa Kandungan Saya Tidak Menghalang Div Induk daripada Runtuh?
- Linda Hamiltonasal
- 2024-12-21 13:37:12348semak imbas
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%;
}
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!
Kenyataan：
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 sebelumnya：Apakah Perbezaan Antara SCSS dan Sass?Artikel seterusnya：Apakah Perbezaan Antara SCSS dan Sass?