Css 2个容器div之间的未知空间

Css 2个容器div之间的未知空间,css,Css,我正在试图确定为什么2个包含div的分区之间会有空格,如图所示,我希望您能理解为什么会出现这种情况: 中间要素div olive和底部包裹div orange之间出现未知空格 我在任何地方都没有设定高度 我想看到橙色的div与上方的橄榄色div相对 我可以发布所有CSS,或者你也可以发布FireBug: 以下是所有CSS: *{ margin:0; padding:0 } body { /*background: url("/images/blueback5.jpg") repeat-x scr

我正在试图确定为什么2个包含div的分区之间会有空格,如图所示,我希望您能理解为什么会出现这种情况:

中间要素div olive和底部包裹div orange之间出现未知空格

我在任何地方都没有设定高度

我想看到橙色的div与上方的橄榄色div相对

我可以发布所有CSS,或者你也可以发布FireBug:

以下是所有CSS:

*{ margin:0; padding:0 }
body
{
/*background: url("/images/blueback5.jpg") repeat-x scroll 0 0 transparent;*/
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#top-wrap {
height: 126px;
width: 940px;    
/*background-color: Yellow;*/
margin: 5px 0 0 0;
}
#head-logo {
background: url("/images/logo3.png") no-repeat scroll 0 0 transparent;
/*background-color: Green;*/
height: 126px;
width: 214px;
margin: 0px 0 0 58px;
position: absolute;
z-index: 100;
}
#submenu1 {
border: 0 solid #000000;
color: #FFFFFF;
/*background-color:Green;*/
font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
font-size: 1.6em;
height: 35px;
width: 155px;
/*padding: 10px 0 0;*/
margin: 7px 0 0 774px;
position: absolute;
}
#submenu2 {
/*border: 0 solid #000000;*/
color: #FFFFFF;
/*background-color:Blue;*/
font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
font-size: 1.8em;
text-align: right;
height: 20px;
width: 114px;
margin: 30px 0 0 818px;
/*padding: 5px 0 0;*/
}    

a.contact
{
background-image: url("/images/RapidButton2.png");
/*border: 1px solid #CCCCCC;*/
/*clear: both;*/
/*color: #FFFFFF;*/
display: block;
font-size: 11px;
/*margin-bottom: 1px;*/
/*padding: 3px 5px;*/
text-align: center;
width: 165px;
height: 27px;
}
a.contact:hover
{
background-image: url("/images/RapidButtonHov2.png");
}

#navigation-primary {
margin: 12px 0 0 276px;
position: absolute;  
}
#global-wrap {
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner {
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft {
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright {
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft {
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
/*margin: 776px 0 0 0;*/
width: 9px;
}
#global-inner .bottomright {
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
/*margin: 776px 0 0 0;*/
width: 9px;
}
#top-feature {
height:330px;
width: 848px;
margin: 12px 0 0 16px;
background: #E4EAEF;
/*background: orange;*/
/*padding: 10px 0 0 10px;*/
position: absolute;
text-align: left;
}
.slideshow {
height: 330px;
width: 848px;
margin: 0 0 0 0;
/*background: blue;*/
position: absolute;
}
#mid-feature
{
margin:350px 0 0 16px;
width:848px;
height:318px;
background-color:Olive;
position:relative;
overflow:hidden;  
}
#mid-featureleft
{
height:318px;
width:552px;
/*background-color:Purple;*/
float:left;
position:relative;
}
#mid-featureright
{
height:318px;
width:296px;
background-color:#B9C1CC;
/*background-color: red;*/
float:left;
position: relative;
}

#mid-featureleft h1 
{
color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.1em;
}
#mid-featureleft .contentbox
{
padding:7px 7px 7px 7px;
}
#mid-featureleft p 
{
color: #0C2A55;
margin:0px 0 11px 0px;
/*font-style:normal;*/
/*width: 97%;*/
/*font-size: .5em;*/
font-size: 12px;
}

#bottom-wrap
{
height:60px;
width: 868px;
margin: auto 0 0 6px;
background:orange;
position: relative;   
}
#copyright
{
float: left; 
/*background-color:Teal;*/ 
width: 260px; 
height: 60px;
text-align: left;
position: absolute;
margin:0 0 0 6px; 
}
#bottom-logos
{
height:60px;
width:596px;
margin:0 0 0 267px;
background: url("/images/logos2.png") no-repeat scroll 0 0 transparent;
/*background-color:red;*/
position:absolute;  
}

我看了一下你的页面,你的div之间有两行。把它们拿出来应该没问题。

我看了你的页面,你的div之间有两行。把它们拿出来应该没问题。

正如Richard Pianka所指出的那样,它们造成了额外的垂直空间,这就是原因所在。如果因为担心清除浮动而不想完全删除它们,请使用没有固有视觉表示的标记:

<div style="clear: both;"></div>
正如Richard Pianka所指出的,正是这些因素导致了额外的垂直空间,这就是原因所在。如果因为担心清除浮动而不想完全删除它们,请使用没有固有视觉表示的标记:

<div style="clear: both;"></div>

这会很难,因为有一个母版页和一个内容页,但你可以通过FireBug在线查看这会很难,因为有一个母版页和一个内容页,但是你可以通过FireBugI在线看到这一点,我在前面的一篇帖子中建议我需要弄清楚,因为中间特性Left和中间特性Right都使用float。杰森回答:谢谢你的回答!在我之前的一篇帖子中,有人建议我需要清除,因为中间特性Left和中间特性Right都使用浮动。杰森回答:谢谢你的回答!好吧,我想我以后会了解清除浮动的重要性!好吧,我想我以后会了解清除浮动的重要性!