一个DIV嵌套问题
我想做一个如下图所示的div布局，2个大黑框是并列的，第一个大黑框中嵌套了6个小红框：现在的问题，就是第二个大黑框的div是可以覆盖第一个大黑框的，如果我给第二个大黑框<...
我想做一个如下图所示的div布局，2个大黑框是并列的，第一个大黑框中嵌套了6个小红框：
现在的问题，就是第二个大黑框的div是可以覆盖第一个大黑框的，如果我给第二个大黑框<div class="second big black">添加灰色背景，那么第一个大黑框也会有相应灰色背景（包括小红框在内的所有大黑框范围内，都有背景色出现）。但是如果我给第一个大黑框的<div class="first big black">添加灰色背景的话，效果是无效的，页面没有任何背景出现。我写的代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><div style="margin:0 auto; width:960px;"><div class="first big black"> <div> <div style="float:left; width:33%">1</div> <div style="float:left; width:33%">2</div> <div style="float:left; width:33%">3</div> </div> <div> <div style="float:left; width:33%">4</div> <div style="float:left; width:33%">5</div> <div style="float:left; width:33%">6</div> </div></div><div class="second big black">第2个大黑框</div></div></body></html>为什么会出现这种状况，用firebug查看的时候，点击第二个大黑框的div，第一个大黑框也是被覆盖的。我是新手菜鸟，感觉问题挺棘手的，请高手多多赐教，非常感激。 展开
现在的问题，就是第二个大黑框的div是可以覆盖第一个大黑框的，如果我给第二个大黑框<div class="second big black">添加灰色背景，那么第一个大黑框也会有相应灰色背景（包括小红框在内的所有大黑框范围内，都有背景色出现）。但是如果我给第一个大黑框的<div class="first big black">添加灰色背景的话，效果是无效的，页面没有任何背景出现。我写的代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><div style="margin:0 auto; width:960px;"><div class="first big black"> <div> <div style="float:left; width:33%">1</div> <div style="float:left; width:33%">2</div> <div style="float:left; width:33%">3</div> </div> <div> <div style="float:left; width:33%">4</div> <div style="float:left; width:33%">5</div> <div style="float:left; width:33%">6</div> </div></div><div class="second big black">第2个大黑框</div></div></body></html>为什么会出现这种状况，用firebug查看的时候，点击第二个大黑框的div，第一个大黑框也是被覆盖的。我是新手菜鸟，感觉问题挺棘手的，请高手多多赐教，非常感激。 展开
3个回答
展开全部
给第一个 大div 添加样式 overflow:hidden;
问题产生原因：由于第一个大 div 内部的小 div 为给了浮动，所以就脱离了原来的文档流，而且第一个大 div 又没有设定高度，所以第二个大 div 就上去了
解决方法：可以给第一个 div 设定高度同样能解决这个问题，为什么我在这里使用 overflow:hidden;呢？这是一个技巧，如果块级元素设定了宽度，给 overflow:hidden;就会自适应高度
希望我的解释你可以明了，有不明白的可以继续追问
问题产生原因：由于第一个大 div 内部的小 div 为给了浮动，所以就脱离了原来的文档流，而且第一个大 div 又没有设定高度，所以第二个大 div 就上去了
解决方法：可以给第一个 div 设定高度同样能解决这个问题，为什么我在这里使用 overflow:hidden;呢？这是一个技巧，如果块级元素设定了宽度，给 overflow:hidden;就会自适应高度
希望我的解释你可以明了，有不明白的可以继续追问
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
第一：如果使用了浮动，要记得清除浮动。如果不清除的话，会出现错层。如：<div style="clear:both"></div>
第二：添加灰色，我相信如果你是给类first 和类second 加上背景颜色的话应该不会出现上诉问题。
第二：添加灰色，我相信如果你是给类first 和类second 加上背景颜色的话应该不会出现上诉问题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.first {
overflow: hidden;
}
</style>
加上这句就好了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
