div覆盖div DIV相互重叠如何解决

转载出处:http://www.divcss5.com/rumen/r674.shtml

div覆盖div,出现div与div盒子之间产生重叠覆盖现象,而内容没有出现覆盖重叠现象原因与解决方法。DIVCSS5通过CSS图文案例介绍产生原因与解决方法。DIV与DIV覆盖原因与解决方法。

可能您遇到过上下结构的布局,下面DIV内容重叠上面DIV内容上,也可能下面内容覆盖掉上面DIV布局,形成DIV与DIV覆盖重叠现象;您也可能遇到过相邻的两个DIV盒子发生重叠覆盖现象,这些是什么问题如何解决?

接下来DIVCSS5通过案例来演示这两种兼容性DIV覆盖重叠现象问题,并解释原因与解决方法。

一、上下结构DIV盒子覆盖   -   TOP

1、首先网站DIV CSS实例HTML代码

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>DIVCSS5实例 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> 

可拷贝代码自己动手发现DIV覆盖现象。

实例代码说明:
设置两个大div盒子分别CSS命名为“.boxa”和“.boxb”,设置宽度相同均为400px,对“.boxb”设置一个黑色边框与高为40px、背景为黑色的;然后在boxa里添加两个一个靠左一个靠右CSS命名分别为“.boxa-l”“.boxa-r”,两个小盒子,同时设置红色边框、css高为80px、宽度分别为280px和100px。

2、实例效果截图

div css案例代码截图
代码在DW软件中,效果浏览器截图

3、问题分析
一般想需要将“.boxa”和“.boxb”布局是上下结构,从上图发现在浏览器中看到效果是两个盒子里内容是实现上下结构效果,但“.boxb”这个DIV跑到“.boxa”下面去了,但内容没有发生覆盖,只有DIV发生覆盖现象。

这个原因是因为第一个大盒子里的子级使用了浮动float属性而产生了浮动,所以导致“.boxa”没有被撑开,而同级的“.boxb”盒子与“.boxa”紧贴,而“.boxa”高度没有,“.boxa”的子级浮动的与“.boxb”不是同级,“.boxb”盒子依然认为“.boxa”没有高度,所以导致“.boxb”DIV盒子就跑到“.boxa”子级DIV盒子下面形成了覆盖重叠现象。

4、问题解决方法
要么清除浮动,要么设置“.boxa”高度,一般情况下文字内容不确定多少 就不能设置固定的高度,所以一般不能设置“.boxa”高度(当然能确定内容多高,这种情况下“.boxa”是可以设置一个高度即可解决覆盖问题。)。

这里就使用CSS清除浮动方法解决上下结构DIV重叠覆盖问题,清除浮动有两种方法,方法如下。

4-1:css clear清除浮动
在“.boxa”盒子</div>闭合前加clear样式清除浮动。

完整HTML源代码:

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>DIVCSS5实例 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. .clear{ clear:both} 
  12. </style> 
  13. </head> 
  14. <body> 
  15. <div class="boxa"> 
  16. <div class="boxa-l">内容左</div> 
  17. <div class="boxa-r">内容右</div> 
  18. <div class="clear"></div> 
  19. </div> 
  20. <div class="boxb">boxb盒子里的内容</div> 
  21. </body> 
  22. </html> 

案例截图

使用clear样式清除浮动案例截图
使用clear样式清除浮动

相关CSS教程文章:
css clear清除浮动

4-2:css overflow清除浮动
此方法与上一方法更为简便简单,只需对“.boxa”(子级有浮动的父级盒子加overflow:hidden)

CSS DIV实例代码如下:

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>DIVCSS5实例 DIV与DIV覆盖</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <style> 
  7. .boxa{ overflow:hidden} 
  8. .boxa,.boxb{ margin:0 auto; width:400px;} 
  9. .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
  10. .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
  11. .boxb{ border:1px solid #000; height:40px; background:#999} 
  12. </style> 
  13. </head> 
  14. <body> 
  15. <div class="boxa"> 
  16. <div class="boxa-l">内容左</div> 
  17. <div class="boxa-r">内容右</div> 
  18. </div> 
  19. <div class="boxb">boxb盒子里的内容</div> 
  20. </body> 
  21. </html> 

DIV+CSS案例效果截图

加css overflow样式解决div重叠覆盖问题
加css overflow样式解决div重叠覆盖问题

相关CSS教程:
css清除浮动

二、相邻两个DIV重叠覆盖   -   TOP

这种新手出现这种问题比较多,一般是由于相邻两个DIV一个使用浮动一个没有使用浮动,这样照成两个DIV覆盖重叠现象。

1、出问题完整CSS+DIV代码

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>DIVCSS5实例 DIV与DIV覆盖</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <style> 
  7. .aa{ float:left; border:1px solid #333; background:#FFF;height:50px;} 
  8. .bb{ border:1px solid #F00;background:#CCC; height:80px} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="aa">我是aa里内容</div> 
  13. <div class="bb">我是BB里内容</div> 
  14. </body> 
  15. </html> 

介绍代码:设置两个盒子使用class命名分别为“.aa”和“.bb”,一个设置float:left一个设置没有设置,一个设置背景为白色,一个设置背景颜色为灰色,一个高度设置50px,一个设置高度为80px,一个边框为黑色,一个边框为红色。

2、案例效果截图

DIV与DIV覆盖案例截图
DIV与DIV覆盖案例截图

3、问题分析
从上图或浏览器测试案例可以看出,“.aa”对应DIV盒子浮动覆盖在“.bb”对应DIV盒子之上,但内容没有覆盖,这是因为“.aa”对应DIV盒子使用了浮动,而同级“.bb”对应DIV盒子没有使用浮动,一个使用浮动一个没有导致DIV不是在同个“平面”上,但内容不会照成覆盖现象,只有DIV形成覆盖现象。

4、解决方法
要么都不使用浮动;要么都使用float浮动;要么对没有使用float浮动的DIV设置margin样式。

比如这里“.aa”对应盒子会固定宽度为300px;这个使用对“.bb”对应盒子设置margin-left:302px(大于300即可,自己测试设置需要的值)实现不重叠覆盖现象。这个解决方法自己在此案例基础上进行设置即可,针对DIVCSS5的VIP会员,可以随时问DIVCSS5,DIVCSS5将给予更详细讲解与介绍。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/425160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第二十五期:5G预约用户超千万!是“虚火”还是“真旺”?

十一假期刚过&#xff0c;“中国5G套餐预约数已超千万”的消息就迅速在朋友圈刷屏&#xff0c;这一庞大的数字背后&#xff0c;也引发了业界关于5G市场的种种思考和担忧&#xff1a;预约热闹过后真正的5G用户会有多少?暂时不选择5G的用户有何顾虑? 十一假期刚过&#xff0c;“…

oracle索引

简介 1.说明 1&#xff09;索引是数据库对象之一&#xff0c;用于加快数据的检索&#xff0c;类似于书籍的索引。在数据库中索引可以减少数据库程序查询结果时需要读取的数据量&#xff0c;类似于在书籍中我们利用索引可以不用翻阅整本书即可找到想要的信息。 2&#xff09;索引…

第八期:实操:两台路由器,如何分别通过WAN和LAN口连接?

两个路由器在一个网段内IP地址是一样的&#xff0c;两个路由器连接有两个DHCP服务器共同工作所以IP会产生冲突。下面我们来一起看下分别通过WAN口和LAN口怎么连接。 两个路由器在一个网段内IP地址是一样的&#xff0c;两个路由器连接有两个DHCP服务器共同工作所以IP会产生冲突。…

cognos10 安装部署

由于工作的原因&#xff0c;今天需要安装下cognos10&#xff0c;由于以前没有接触过IBM的这个产品&#xff0c;因此付出了一天时间的惨痛代价&#xff0c;写这篇文章的目的就是对cognos10的初学者安装部署时能少走弯路&#xff0c;各位cognos的大侠请多批评和指教&#xff0c;不…

GPLT2017题目

阅览室: L1-043. 阅览室 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 天梯图书阅览室请你编写一个简单的图书借阅统计程序。当读者借书时&#xff0c;管理员输入书号并按下S键&#xff0c;程序开始计时&#xff1b;当读者还书时&#…

Spring各jar包的作用(转载)

spring.jar是包含有完整发布的单个jar 包&#xff0c;spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容&#xff0c;因为只有在开发环境下才会用到 spring-mock.jar来进行辅助测试&#xff0c;正式应用系统中是用不得这些类的。 除了spring.jar文件&am…

[密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第15篇]RSA-OAEP和ECIES的密钥生成,加密和解密

这是一系列博客文章中最新的一篇&#xff0c;该文章列举了“每个博士生在做密码学时应该知道的52件事”:一系列问题的汇总是为了让博士生们在第一年结束时知道些什么。通过描述RSA-OAEP和ECIES的密钥生成、加密和解密算法&#xff0c;我们回到了"more crypto" staff …

第二十六期:HTTP 3的前世今生及尝鲜

HTTP/3又迎来一个里程碑&#xff1a;近日Cloudflare官方宣其边缘网络上已全面提供QUIC和HTTP/3支持。那么HTTP/3可以带来哪些变化和优势呢? 对Internet的用户&#xff0c;并且通过浏览器和其他客户端与站点进行高效交互。 HTTP/3又迎来一个里程碑&#xff1a;近日Cloudflare官…

业务时间做开发,使用jeecg框架

最近想在业余时间做一个项目管理的应用给自己用&#xff0c;但自己业余时间又不多&#xff0c;所以就想找一个不用重复写基本代码&#xff08;例如bean、dao、service、action的增删改查&#xff09;&#xff0c;不用重复写jsp代码。这样&#xff0c;我选择了jeecg。它基本满足…

前端中标签页的手写方法

虽然流行用框架写出来 这里也可以用手写方法写出来 也并不是这么复杂 首先为了实现如下效果的标签 我们可以在前端把两个表直接输出出来 <table class "tag char" id "tagf" ><tr><td>Found</td><td>Found time</td&…

Redis中的执行命令的过程

在redis.c的initServerConfig()方法中&#xff0c;通过调用dictCreate方法初始化server端的命令表。这个命令表是一个hashtable,可以通过key找到相关的命令&#xff1a; /* Command table -- we initiialize it here as it is part of the* initial configuration, since comma…

[密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第16篇]描述DSA、Schnorr和RSA-FDH的密钥生成、签名和验证算法。

这是一系列博客文章中最新的一篇&#xff0c;文章的主题是“做密码学每个博士生都应该知道的52件事”。这一系列问题是为了让博士生们在第一年结束时了解他们应该知道的事情。本周我们将介绍DSA、Schnorr和RSA-FDH的密钥生成、签名和验证算法。 1.DSA 2.Schnorr 3.RSA-FDH Refe…

nutch2.1在windows平台上使用eclipsedebug 存储在mysql的搭建过程

步骤1&#xff1a;准备好eclipse、eclipse svn插件、mysql准备好&#xff0c;mysql使用utf-8编码 步骤2&#xff1a;mysql建库&#xff0c;建表&#xff1a; CREATEDATABASEnutch ; CREATE TABLE webpage (id varchar(767) NOT NULL,headers blob,text mediumtext DEFAULT NULL…

(转)分布式锁的几种使用方式(redis、zookeeper、数据库)

https://blog.csdn.net/u010963948/article/details/79006572转载于:https://www.cnblogs.com/Andrew520/p/10663350.html

[密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第17篇]述和比较DES和AES的轮结构

这是一系列博客文章中最新的一篇&#xff0c;该文章列举了“每个博士生在做密码学时应该知道的52件事”:一系列问题的汇编是为了让博士生们在第一年结束时知道些什么。这周&#xff0c;我们描述和比较DES和AES轮结构。 DES和AES都是迭代分组密码的例子.分组密码通过重复使用一个…

nutch2.1分布式抓取

在上一篇的基础上。 1准备环境&#xff1a;hadoop集群、java、mysql数据库&#xff0c;代码可以在eclipse中运行&#xff0c;可以单机模式下插入数据到mysql数据库。2修改配置文件nutch-site.xml&#xff1a;<property><name>plugin.folders</name><value…

AtCoder-2379 - 连接竹竿 思维 | 数学

Problem Statement Snuke has N integers. Among them, the smallest is A, and the largest is B. We are interested in the sum of those N integers. How many different possible sums there are? Constraints 1≤N,A,B≤109A and B are integers. Input Input is given…

UML用例图

统一建模语言&#xff08;Unified Modeling Language&#xff0c;UML&#xff09;又称标准建模语言&#xff0c;是始于1997年的一个OMG标准&#xff0c;它是一个支持模型化和软件系统开发的图形化语言&#xff0c;为软件开发的所有阶段提供模型化和可视化支持&#xff0c;包括由…

[剑指offer]面试题第[44]题[JAVA][数字序列中某一位的数字][找规律]

【问题描述】[中等] 【解答思路】 找规律 时间复杂度&#xff1a;O(logN) 空间复杂度&#xff1a;O(logN) class Solution {public int findNthDigit(int n) {int digit 1;long start 1;long count 9;while (n > count) { // 1.n - count;digit 1;start * 10;count di…

深度学习第五课-训练注意事项与框架使用

说明&#xff1a;本文是七月算法5月深度学习班第五次课听课笔记。黄色标注的部分为自己不太确定的部分。 训练 mini-batch SGD 神经网络使用mini-batch SGD训练得到最优权重。训练过程如下&#xff1a;&#xff08;以下参考了andrew ng的机器学习课程&#xff09;例如训练样本…