DIV+CSS 一个DIV里面嵌套三个DIV

netjuly 2012-07-23 09:21:24



     #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)的上边都有一点空隙，怎么把空隙删除。
效果图：

...全文

1974 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

forqing 2012-07-24

打赏
举报

[Quote=引用 6 楼的回复:]

奇怪了，我在IE6，7，8、火狐，谷歌、欧朋、苹果的Safari，显示都是正常的啊。没有出现楼主所说的那种情况啊。
[/Quote]
支持

lizhengdao1314 2012-07-24

打赏
举报

奇怪了，我在IE6，7，8、火狐，谷歌、欧朋、苹果的Safari，显示都是正常的啊。没有出现楼主所说的那种情况啊。

zhangyong369 2012-07-23

打赏
举报

除了未清除浮动外无异常

netjuly 2012-07-23

打赏
举报

还是老样子
360极速浏览器版本号：5.3.0.922
IE8
两个浏览器都试了

netjuly 2012-07-23

打赏
举报

[Quote=引用 2 楼的回复:]

不知道楼主什么浏览器。除了未清除浮动外无异常啊！
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/xht……
[/Quote]
<div id ="n" class="clearfix">引用的是哪个啊
.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;}

86y 2012-07-23

打赏
举报

不知道楼主什么浏览器。除了未清除浮动外无异常啊！



<!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>

netjuly 2012-07-23

打赏
举报

图片显示不完整
右键单击 > 在新标签页中打开图片
或访问以下链接：
http://img.my.csdn.net/uploads/201207/23/1343050098_5932.jpg
http://img.my.csdn.net/uploads/201207/23/1343050098_5932.jpg