Maison >interface Web >tutoriel HTML >DIV+CSS 一个DIV里面嵌套三个DIV_html/css_WEB-ITnose
DIV+CSS 一个DIV里面嵌套三个DIV_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:13:511871parcourir
#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，显示都是正常的啊。没有出现楼主所说的那种情况啊。
支持
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：页面总是出现竖向滚动条是怎么回事？我的页面实在不复杂啊？_html/css_WEB-ITnoseArticle suivant：<img src ="">如何显示绝对路径的图片?_html/css_WEB-ITnose