Home > Article > Web Front-end > DIV+CSS 一个DIV里面嵌套三个DIV_html/css_WEB-ITnose
DIV+CSS 一个DIV里面嵌套三个DIV_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:13:511783browse
#n { width:960px; height:84px; margin:0 auto; padding:0px; background-color:Green;} #n1 { width:230px; height:84px; margin:0px; padding:0px; float:left; background-color:Red;} #n2 { width:470px; height:84px; margin:0px; padding:0px; float:left; background-color:Yellow;} #n3 { width:200px; height:84px; margin:0px; padding:0px; float:right; background-color:Black;} #f { width:960px; height:70px; margin:0 auto; padding:0px; background-color:Blue; } <div id ="n"> <div id="n1"></div> <div id="n2"></div> <div id="n3"></div> </div> <div id = "f"> </div>
为什么div(n1,n2,n3) 不和 div(n)重合，div(n1,n2,n3)的上边都有一点空隙， 怎么把空隙删除。
效果图：
回复讨论(解决方案)
图片显示不完整
右键单击 > 在新标签页中打开图片
或 访问以下链接：
http://img.my.csdn.net/uploads/201207/23/1343050098_5932.jpg
不知道楼主什么浏览器。除了未清除浮动外无异常啊！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>divtest</title><style type="text/css">/**----------------------------------body styles----------------------------------------**/#n {width:960px; height:84px; margin:0 auto; padding:0px; background-color:Green;} #n1 { width:230px; height:84px; margin:0px; padding:0px; float:left; background-color:Red;} #n2 { width:530px; height:84px; margin:0px; padding:0px; float:left; background-color:Yellow;} #n3 { width:200px; height:84px; margin:0px; padding:0px; float:right; background-color:Black;} #f { width:960px; height:70px; margin:0 auto; padding:0px; background-color:Blue; }.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} *html .clearfix{height:1%;}*+html .clearfix{height:1%;}.clearfix{display:inline-block;} /* Hide from IE Mac */ .clearfix {display:block;} </style></head><body> <div id ="n" class="clearfix"> <div id="n1"></div> <div id="n2"></div> <div id="n3"></div> </div> <div id = "f"> </div></body></html> 不知道楼主什么浏览器。除了未清除浮动外无异常啊！
HTML code
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
引用的是哪个啊
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
还是老样子
360极速浏览器 版本号：5.3.0.922
IE8
两个浏览器都试了
除了未清除浮动外无异常
奇怪了，我在IE6，7，8、火狐，谷歌、欧朋、苹果的Safari，显示都是正常的啊。没有出现楼主所说的那种情况啊。
奇怪了，我在IE6，7，8、火狐，谷歌、欧朋、苹果的Safari，显示都是正常的啊。没有出现楼主所说的那种情况啊。
支持
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：页面总是出现竖向滚动条是怎么回事？我的页面实在不复杂啊？_html/css_WEB-ITnoseNext article：<img src ="">如何显示绝对路径的图片?_html/css_WEB-ITnose