Mengapa Luar Saya Tidak `` Melampirkan Sepenuhnya Dalam Saya `` pada Saiz Tetingkap?-tutorial css-php.cn

Why Doesn't My Outer `` Fully Enclose My Inner `` on Window Resize?

Mengapa Bahagian Luar

Gagal Mengelilingi Sepenuhnya

Apabila Tetingkap Mengecil?

Isu ini timbul daripada interaksi antara sifat CSS yang berbeza dan tetapan paparan elemen. Secara lalai, elemen peringkat blok, seperti

, akan berkembang untuk mengisi lebar yang tersedia bagi blok yang mengandunginya. Dalam kes ini, bahagian luar

ialah elemen peringkat blok dalam blok yang mengandungi lebih luas.

Untuk mengelakkan

daripada mengecut di bawah lebar bahagian dalam

, gabungan sifat blok sebaris dan lebar min boleh digunakan. Berikut ialah penjelasannya:

sebaris-blok: Nilai paparan ini membenarkan elemen bertindak seperti elemen sebaris sambil mengekalkan keupayaan untuk menentukan lebar dan ketinggian tertentu. Ini menghalang elemen daripada pecah ke baris baharu dan memastikan ia terkandung dalam elemen induknya.
lebar min: 100%: Dengan menetapkan lebar min bagi daripada melarikan diri melepasi sempadan
apabila tetingkap mengecil.

Dengan memasukkan paparan blok sebaris dan lebar min, kita boleh mengekang

untuk memeluk lebar

sambil mengekalkan tingkah laku peringkat bloknya.

Atas ialah kandungan terperinci Mengapa Luar Saya Tidak `` Melampirkan Sepenuhnya Dalam Saya `` pada Saiz Tetingkap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Bagaimana untuk Mencegah Peralihan Elemen Sebaris pada Tuding Tebal? Artikel seterusnya：Bagaimana untuk Mengintegrasikan Fon Tersuai ke dalam HTML tanpa Flash atau PHP?

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

2814

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

2939

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

2457

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