Mengapa Luar Saya Tidak `` Mengandungi Dalam Saya `` Apabila Diubah Saiz?-tutorial css-php.cn

Why Doesn't My Outer `` Contain My Inner `` When Resized?

Mengapa Bahagian Luar

Di Sini Tidak Mengelilingi Sepenuhnya

Masalah:

Dalam coretan kod yang disediakan, kandungan

tidak menghalang

daripada mengecut apabila saiz tingkap diubah. Akibatnya, bahagian dalam

tumpah ke bahagian luar

Perbincangan:

Isu timbul kerana

ditetapkan untuk mempunyai lebar tetap. Secara lalai, 块元素（elemen blok） mempunyai lebarnya berdasarkan elemen induknya. Walau bagaimanapun, bahagian dalam

mengandungi kandungan yang melebihi lebar

luar, menyebabkan ia melimpah.

Penyelesaian:

Untuk membuat

balut di sekeliling

dalam, seseorang boleh menggunakan gabungan blok sebaris dan lebar min:100%. Dengan menetapkan

kepada sekatan sebaris, lebarnya menjadi berasaskan kandungan dan bukannya berasaskan ibu bapa. Menambah lebar min:100% memastikan

tidak pernah lebih kecil daripada lebar kandungannya.

Kod Kemas Kini:

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

Salin selepas log masuk

Pengubahsuaian ini membenarkan

untuk mengubah saiz secara automatik berdasarkan kandungannya, menghalang

daripada tertumpah di luar.

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

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mendapatkan Elemen DOM mengikut Nama Kelas dalam PHP? Artikel seterusnya：Bolehkah Kecerunan CSS3 Menggabungkan Ketelusan?

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

2219

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

2363

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

1976

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