CSS代码，两个DIV层之间的边距问题

2024-12-13 10:25:23

推荐回答（5个）

回答1：

CSS样式：

代码：

左

右

【样式里面添加了：.clear{
clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden;} #div2{
display:block; clear:both;}
代码添加：

】

回答2：

1. 解决方法：给div2添加如下样式，就能解决上面情况：

clear:both;

2. 有的时候为了让外侧层根据内容自动调整，没有设置高度或宽度，一般都会正常显示。

但如果层内元素使用了float属性，就会使那些元素脱离文件流，就无法再扩充容器层，就会导致外层大小无法根据内容自动调整。

关于这个问题，总结出以几种在当下几种主流浏览器都兼容的方法，供大家参考。

1.清除浮动

在层中的有浮动属性的元素最后边加上

来清除

<divstyle="background:#eee;">

<divstyle="height:100px;width:100px;background:Green;float:left;">div>

<divstyle="height:100px;width:100px;background:Red;float:right;">div>

style="clear:both;">

div>

。。。。

详细解说，可以百度

“DIV层内的元素在使用了float属性后无法自动改变高度的解决办法：”

去我博客查看。

http://blog.sina.com.cn/s/blog_5a7775e30101bamu.html

回答3：

因为写的不是很严谨，造成一些难控制的变化，这不是我们能决定的为什么它会这样变，
所以只能将代码写的严谨点
#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；

回答4：

解决这个问题很多种方法，你写的结构和css不够严谨。
最简单的方法就是左和右放在一个盒子里，22单独一个盒子，就是DIV，
建议去学习一下div+css基础知识。

回答5：

让整个页面的高度自增就可以了呀！