怎么解决div覆盖内容却没覆盖的问题?_html/css_WEB-ITnose
一、在上下结构的div布局中，可能出现div覆盖div，但是内容却没有出现覆盖的现象。看看一个示例
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>DIV与DIV覆盖</title>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <style>
7: .boxa,.boxb{ margin:0 auto; width:400px;} 8: .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 9: .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 10: .boxb{ border:1px solid #000; height:40px; background:#999}11: </style>
12: </head>
13: <body>
14: <div class="boxa">
15: <div class="boxa-l">内容左</div>
16: <div class="boxa-r">内容右</div>
17: </div>
18: <div class="boxb">boxb盒子里的内容</div>
19: </body>
20: </html>
一般想需要将“.boxa”和“.boxb”布局是上下结构，从上图发现在浏览器中看到效果是两个盒子里内容是实现上下结构效果，但“.boxb”这个DIV跑到“.boxa”下面去了，但内容没有发生覆盖，只有DIV发生覆盖现象。
这 个原因是因为第一个大盒子里的子级使用了浮动float属性而产生了浮动，所以导致“.boxa”没有被撑开，而同级的“.boxb”盒子与 “.boxa”紧贴，而“.boxa”高度没有，“.boxa”的子级浮动的与“.boxb”不是同级，“.boxb”盒子依然认为“.boxa”没有高 度，所以导致“.boxb”DIV盒子就跑到“.boxa”子级DIV盒子下面形成了覆盖重叠现象。
问题解决办法，测试有三种：
1、给boxa添加一个height属性，height的值必须大于或等于baxa-l的高度
1: <div class="boxa" style="height:81px;">
2、清除浮动
在“.boxa”盒子
1: //css
2: .clear{ clear:both}3:
4: //修改boxa
5: <div class="boxa">
6: <div class="boxa-l">内容左</div>
7: <div class="boxa-r">内容右</div>
8: <div class="clear"></div>
9: </div>
或者在boxb上清除浮动
1: <div class="boxb" style="clear:both">boxb盒子里的内容</div>
3、对“.boxa”添加overflow:hidden
1: <div class="boxa" style="overflow:hidden">
2: <div class="boxa-l">内容左</div>
3: <div class="boxa-r">内容右</div>
4: </div>
二、相邻两个DIV重叠覆盖
这种问题一般是由于相邻两个DIV一个使用浮动一个没有使用浮动，这样照成两个DIV覆盖重叠现象。
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>DIV与DIV覆盖</title>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <style>
7: .bb{ float:left; border:1px solid #333; background:#FFF;height:50px;} 8: .cc{ border:1px solid #F00;background:#CCC; height:80px}9: </style>
10: </head>
11: <body>
12: <div class="bb">我是bb里内容</div>
13: <div class="cc">我是dd里内容</div>
14: </body>
15: </html>
从 上图或浏览器测试案例可以看出，“.bb”对应DIV盒子浮动覆盖在“.cc”对应DIV盒子之上，但内容没有覆盖，这是因为“.bb”对应DIV盒子使 用了浮动，而同级“.cc”对应DIV盒子没有使用浮动，一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成 覆盖现象。
解决方法：
1、都不使用浮动，去掉.bb中的float，效果如下
2、都使用浮动，给.cc添加float:left,效果如下
3、对没有使用float浮动的DIV设置margin样式。给.cc添加margin:100px,效果如下
来源：http://www.ido321.com/669.html
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Penyelesaian kepada masalah bahawa sistem Win11 tidak dapat memasang pek bahasa Cina
Mar 09, 2024 am 09:48 AM
Penyelesaian kepada masalah sistem Win11 tidak dapat memasang pek bahasa Cina Dengan pelancaran sistem Windows 11, ramai pengguna mula menaik taraf sistem pengendalian mereka untuk mengalami fungsi dan antara muka baharu. Walau bagaimanapun, sesetengah pengguna mendapati bahawa mereka tidak dapat memasang pek bahasa Cina selepas menaik taraf, yang menyusahkan pengalaman mereka. Dalam artikel ini, kami akan membincangkan sebab mengapa sistem Win11 tidak dapat memasang pek bahasa Cina dan menyediakan beberapa penyelesaian untuk membantu pengguna menyelesaikan masalah ini. Analisis sebab Pertama, mari kita menganalisis ketidakupayaan sistem Win11 untuk
Lima petua untuk mengajar anda cara menyelesaikan masalah telefon Black Shark tidak dihidupkan!
Mar 24, 2024 pm 12:27 PM
Apabila teknologi telefon pintar terus berkembang, telefon bimbit memainkan peranan yang semakin penting dalam kehidupan seharian kita. Sebagai telefon perdana yang memfokuskan pada prestasi permainan, telefon Black Shark sangat digemari oleh pemain. Namun, kadangkala kita juga menghadapi situasi telefon Black Shark tidak boleh dihidupkan Pada masa ini, kita perlu mengambil beberapa langkah untuk menyelesaikan masalah ini. Seterusnya, izinkan kami berkongsi lima petua untuk mengajar anda cara menyelesaikan masalah telefon Black Shark tidak dihidupkan: Langkah 1: Periksa kuasa bateri Pertama, pastikan telefon Black Shark anda mempunyai kuasa yang mencukupi. Ia mungkin kerana bateri telefon telah habis
Pemacu tidak boleh dimuatkan pada peranti ini Bagaimana untuk menyelesaikannya? (Diuji secara peribadi dan sah)
Mar 14, 2024 pm 09:00 PM
Semua orang tahu bahawa jika komputer tidak dapat memuatkan pemacu, peranti mungkin tidak berfungsi dengan betul atau berinteraksi dengan komputer dengan betul. Jadi bagaimana kita menyelesaikan masalah apabila kotak gesaan muncul pada komputer bahawa pemandu tidak boleh dimuatkan pada peranti ini? Editor di bawah akan mengajar anda dua cara untuk menyelesaikan masalah dengan mudah. Tidak dapat memuatkan pemacu pada peranti ini Penyelesaian 1. Cari "Pengasingan Kernel" dalam menu Mula. 2. Matikan Integriti Memori, dan ia akan menggesa "Integriti Memori telah dimatikan. Peranti anda mungkin terdedah. Klik di belakang untuk mengabaikannya, dan ia tidak akan menjejaskan penggunaan." 3. Masalah boleh diselesaikan selepas menghidupkan semula mesin.
Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan?
Mar 22, 2024 am 08:06 AM
Dengan perkembangan media sosial yang berterusan, Xiaohongshu telah menjadi platform untuk lebih ramai golongan muda berkongsi kehidupan mereka dan menemui perkara yang indah. Ramai pengguna bermasalah dengan isu autosimpan semasa menyiarkan imej. Jadi, bagaimana untuk menyelesaikan masalah ini? 1. Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? 1. Kosongkan cache Pertama, kita boleh cuba mengosongkan data cache Xiaohongshu. Langkah-langkahnya adalah seperti berikut: (1) Buka Xiaohongshu dan klik butang "Saya" di sudut kanan bawah (2) Pada halaman tengah peribadi, cari "Tetapan" dan klik padanya (3) Tatal ke bawah dan cari "; Kosongkan Cache". Klik OK. Selepas mengosongkan cache, masukkan semula Xiaohongshu dan cuba siarkan gambar untuk melihat sama ada masalah penjimatan automatik telah diselesaikan. 2. Kemas kini versi Xiaohongshu untuk memastikan bahawa Xiaohongshu anda
Bagaimana untuk menyelesaikan masalah gateway lalai secara automatik hilang
Feb 24, 2024 pm 04:18 PM
Bagaimana untuk menyelesaikan masalah bahawa pintu masuk lalai hilang secara automatik Dalam masyarakat moden, Internet telah menjadi bahagian yang sangat diperlukan dalam kehidupan orang ramai. Sama ada untuk kerja atau hiburan, kita semua memerlukan sambungan rangkaian yang stabil untuk menyelesaikan pelbagai tugas. Gerbang lalai ialah salah satu elemen utama yang menghubungkan rangkaian tempatan ke Internet luaran. Walau bagaimanapun, kadangkala kita mungkin menghadapi masalah bahawa get laluan lalai hilang secara automatik, mengakibatkan ketidakupayaan untuk mengakses Internet. Jadi, bagaimanakah kita harus menyelesaikan masalah ini apabila gerbang lalai hilang? Pertama, kita harus menjelaskan konsep gerbang lalai. Gerbang lalai ialah laluan rangkaian
Bagaimana untuk menyelesaikan masalah bahawa pelayar Huawei telah berhenti mengakses halaman web ini
Feb 26, 2024 pm 01:28 PM
Bagaimana untuk menyelesaikan masalah bahawa pelayar Huawei telah berhenti mengakses halaman web ini? Apabila menggunakan penyemak imbas mudah alih Huawei untuk mengakses tapak web tertentu, gesaan yang menunjukkan bahawa akses adalah dilarang mungkin muncul, menghalang pengguna daripada menyemak imbas kandungan berkaitan seperti biasa. Ini sangat menyusahkan pengguna. Jadi, apakah yang perlu kita lakukan apabila kita menghadapi situasi di mana akses kepada tapak web penyemak imbas mudah alih Huawei adalah dilarang? Editor di bawah akan memberikan anda penyelesaian kepada masalah melarang akses kepada tapak web penyemak imbas Huawei. Saya harap ia akan membantu anda. Penyelesaian kepada larangan akses ke tapak web Pelayar Huawei 1. Selepas membuka penyemak imbas mudah alih Huawei, klik ikon tiga titik di bawah, dan kemudian klik Tetapan. 2. Selepas memasukkan tetapan, klik [Security and Privacy] 3. Matikan suis di sebelah kanan [Safe Browsing] untuk mengalih keluar sekatan akses tapak web. Perkara di atas adalah penyelesaian kepada larangan akses laman web pelayar Huawei.
Bagaimana untuk menukar pelayar Microsoft Edge untuk dibuka dengan navigasi 360 - Bagaimana untuk menukar pembukaan dengan navigasi 360
Mar 04, 2024 pm 01:50 PM
Bagaimana untuk menukar halaman yang membuka pelayar Microsoft Edge kepada navigasi 360 Ia sebenarnya sangat mudah, jadi sekarang saya akan berkongsi dengan anda kaedah menukar halaman yang membuka pelayar Microsoft Edge kepada 360 navigasi Rakan-rakan yang memerlukan lihat. Saya harap dapat membantu semua orang. Buka penyemak imbas Microsoft Edge. Kami melihat halaman seperti di bawah. Klik pada ikon tiga titik di sudut kanan atas. Klik "Tetapan." Klik "Pada permulaan" dalam lajur kiri halaman tetapan. Klik pada tiga titik yang ditunjukkan dalam gambar di lajur kanan (jangan klik "Buka Tab Baharu"), kemudian klik Edit dan tukar URL kepada "0" (atau nombor lain yang tidak bermakna). Kemudian klik "Simpan". Seterusnya, pilih "
Mentafsir ralat Oracle 3114: punca dan penyelesaian
Mar 08, 2024 pm 03:42 PM
Tajuk: Analisis Ralat Oracle 3114: Punca dan Penyelesaian Apabila menggunakan pangkalan data Oracle, anda sering menghadapi pelbagai kod ralat, antaranya ralat 3114 adalah yang biasa. Ralat ini biasanya melibatkan masalah pautan pangkalan data, yang mungkin menyebabkan pengecualian apabila mengakses pangkalan data. Artikel ini akan mentafsir ralat Oracle 3114, membincangkan puncanya dan memberikan kaedah khusus untuk menyelesaikan ralat dan contoh kod yang berkaitan. 1. Definisi ralat 3114 ralat Oracle 3114 lulus
