DIV+CSS 一个DIV里头嵌套三个DIV
日期：2014-05-17 浏览次数：21288 次
DIV+CSS 一个DIV里面嵌套三个DIV
为什么div(n1,n2,n3) 不和 div(n)重合，div(n1,n2,n3)的上边都有一点空隙， 怎么把空隙删除。
效果图：
------解决方案--------------------
不知道楼主什么浏览器。除了未清除浮动外无异常啊！
- CSS code
#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; }
- HTML code
<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)的上边都有一点空隙， 怎么把空隙删除。
效果图：
------解决方案--------------------
不知道楼主什么浏览器。除了未清除浮动外无异常啊！
- HTML code
<!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>
------解决方案--------------------
除了未清除浮动外无异常
------解决方案--------------------
奇怪了，我在IE6，7，8、火狐，谷歌、欧朋、苹果的Safari，显示都是正常的啊。没有出现楼主所说的那种情况啊。
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
