CSS代码，两个DIV层之间的边距问题
<styletype="text/css">#div1{background:#009933;height:auto;width:500px;margin:auto}#l...
<style type="text/css">#div1{ background:#009933; height:auto; width:500px; margin:auto}#left{ width:200px; height:auto; float:left; background:#00FF33; }#right{ width:290px; height:auto; margin-left:210px; background:#FF00CC;}#div2{ background:#009999; height:50px;width:500px; margin-top:10px; margin-left:auto; margin-right:auto;}</style><body><div id="div1"><div id="left">左</div><div id="right">右</div> </div><div id="div2">22</div>
效果图
当我在左边DIV中增加内容时，就出现了下面的情况~~
在右边DIV增加内容，效果~
我想要的效果是：不管左DIV层还是右DIV层，怎么增加它的高度· 22DIV都不受它们的影响，请问高手我该如何写CSS代码？ 展开
效果图
当我在左边DIV中增加内容时，就出现了下面的情况~~
在右边DIV增加内容，效果~
我想要的效果是：不管左DIV层还是右DIV层，怎么增加它的高度· 22DIV都不受它们的影响，请问高手我该如何写CSS代码？ 展开
展开全部
CSS样式：
<style type="text/css">
.clear{
clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden;}
#div1{ background:#009933; height:auto; width:500px; margin:auto;}
#left{ width:200px; height:auto; float:left; background:#00FF33; }
#right{ width:290px; height:auto; margin-left:210px; background:#FF00CC;}
#div2{ background:#009999; height:50px;width:500px; margin-top:10px; margin-left:auto; margin-right:auto; display:block; clear:both;}
</style>
代码：
<div id="div1">
<div id="left">左</div>
<div id="right">右</div>
<div class="clear"></div>
</div>
<div id="div2">22</div>
【样式里面添加了：.clear{
clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden;} #div2{
display:block; clear:both;}
代码添加：<div class="clear"></div>
】
<style type="text/css">
.clear{
clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden;}
#div1{ background:#009933; height:auto; width:500px; margin:auto;}
#left{ width:200px; height:auto; float:left; background:#00FF33; }
#right{ width:290px; height:auto; margin-left:210px; background:#FF00CC;}
#div2{ background:#009999; height:50px;width:500px; margin-top:10px; margin-left:auto; margin-right:auto; display:block; clear:both;}
</style>
代码：
<div id="div1">
<div id="left">左</div>
<div id="right">右</div>
<div class="clear"></div>
</div>
<div id="div2">22</div>
【样式里面添加了：.clear{
clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden;} #div2{
display:block; clear:both;}
代码添加：<div class="clear"></div>
】
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1. 解决方法：给div2添加如下样式，就能解决上面情况：
clear:both;
2. 有的时候为了让外侧层根据内容自动调整，没有设置高度或宽度，一般都会正常显示。
但如果层内元素使用了float属性，就会使那些元素脱离文件流，就无法再扩充容器层，就会导致外层大小无法根据内容自动调整。
关于这个问题，总结出以几种在当下几种主流浏览器都兼容的方法，供大家参考。
1.清除浮动
在层中的有浮动属性的元素最后边加上
来清除
<</SPAN>divstyle="background:#eee;">
<</SPAN>divstyle="height:100px;width:100px;background:Green;float:left;"></</SPAN>div>
<</SPAN>divstyle="height:100px;width:100px;background:Red;float:right;"></</SPAN>div>
style="clear:both;">
>
</</SPAN>div>
。。。。
详细解说，可以百度
“DIV层内的元素在使用了float属性后无法自动改变高度的解决办法：”
去我博客查看。
http://blog.sina.com.cn/s/blog_5a7775e30101bamu.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为写的不是很严谨，造成一些难控制的变化，这不是我们能决定的为什么它会这样变，
所以只能将代码写的严谨点
#right{ width:290px; height:auto; margin-left:210px; background:#FF00CC;}
margin-left:210px;应该是10px吧！
而且#div1{ background:#009933; height:auto; width:500px; margin:auto}
#left{ width:200px; height:auto; float:left; background:#00FF33; }
#right{ width:290px; height:auto; margin-left:210px; background:#FF00CC;}
#div2{ background:#009999; height:50px;width:500px; margin-top:10px; margin-left:auto; margin-right:auto;}
都加上overflow：hidden；
所以只能将代码写的严谨点
#right{ width:290px; height:auto; margin-left:210px; background:#FF00CC;}
margin-left:210px;应该是10px吧！
而且#div1{ background:#009933; height:auto; width:500px; margin:auto}
#left{ width:200px; height:auto; float:left; background:#00FF33; }
#right{ width:290px; height:auto; margin-left:210px; background:#FF00CC;}
#div2{ background:#009999; height:50px;width:500px; margin-top:10px; margin-left:auto; margin-right:auto;}
都加上overflow：hidden；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
解决这个问题很多种方法，你写的结构和css不够严谨。
最简单的方法就是左和右放在一个盒子里，22单独一个盒子，就是DIV，
建议去学习一下div+css基础知识。
最简单的方法就是左和右放在一个盒子里，22单独一个盒子，就是DIV，
建议去学习一下div+css基础知识。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
让整个页面的高度自增就可以了呀！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（7）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
