内容溢出的div

解决：内容溢出的div

我有a demo其上的jsfiddle工作，但同样一个不上other site工作。您将看到.right_side_header class溢出到下一行，该行在main_container-->header--->class之下。这是为什么？它是763px，我已经为每个盒子检查了像素，但它溢出了。有人可以告诉我为什么吗？如果您检查元素，并取消选中763px的宽度，则不会溢出。

下面是一些header的CSS代码：

.header { 
    display: block; 
    padding-top: 33px; 
    padding-left: 30px; 
    padding-right: 30px; 
    margin-left:auto; 
    margin-right:auto; 
    width: 900px; 
} 

.right_side_header { 
    display: inline-block; 
    vertical-align: top; 
    padding-top: 35px; 
    width: 763px; 
} 

img.globe { 
    display: inline; 
} 

#globe-logo { 
    display: inline; 
    position: relative; 
    z-index: 9000; 
} 

span.letter_logo { 
    font-family: HelveticaBlack; 
    font-size: 41px; 
    height: 41px; 
    line-height: 1; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    text-shadow: 1px 1px 0px rgba(245, 245, 245, 0.35), -1px -1px 0px rgba(245, 245, 245, 0.35); 
} 

div.letter_logo_container { 
    text-align: center; 
    display: block; 
    line-height: 1; 
    width: 621px; 
}

，这里是为nav_bar CSS代码：

div.nav_phone { 
    height: 18px; 
    padding-top: 3px; 
    width: 621px; 
    display: inline-block; 
} 

span.sales_ph_num { 
    font-family: HelveticaItalic; 
    font-size: 11.5px; 
    color: #c10d24; 
    text-shadow: 1px 1px 0px rgba(245, 235, 236, 0.4), -1px -1px 0px rgba(245, 235, 236, 0.4); 
} 

div.sales_ph_num { 
    text-align: center; 
    display: inline-block; 
    vertical-align: top; 
    width: 110px; 
} 


.nav_bar { 
    background-image: url("132/nav_bar.png"); 
    background-repeat: no-repeat; 
    height: 18px; 
    width: 621px; 
    position: relative; 
} 

div#links { 
    line-height: 1; 
    position: absolute; 
    top: 50%; 
    left: 119px; 
    margin: -6px auto 0 auto; 
    font: 12px HelveticaMedium; 
    text-align: center; 
    text-shadow: 1px 1px 0px rgba(237, 237, 237, 0.5), -1px -1px 0px rgba(237, 237, 237, 0.5); 
} 

#Products { 
    margin-left: 36px; 
} 

#Terms, #Terms_Nav { 
    margin-left: 36px; 
} 

a.Terms, a.Terms:visited, #Home a, #Home a:visited, a#About, a#About:visited, 
#About a, #About a:visited { 
    text-decoration: none; 
    color: #000000; 
    cursor:pointer; 
} 

li#line_break { 
    margin-top: 12px; 
} 

#About { 
    text-decoration: none; 
    color: #000000; 
    margin-left: 36px; 
    margin-right: 35px; 
}

，这是main_body CSS：

html, body { 
    width: 100%; 
    height: 100%; 
    background-color: #fafafa; 
    -webkit-overflow-scrolling: touch; 
    position: relative; 
    overflow-x: hidden; 
} 

.main_container { 
    max-width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #ffffff; 
    -webkit-border-radius: 8px 8px 8px 8px; 
    -moz-border-radius: 8px 8px 8px 8px; 
    -o-border-radius: 8px 8px 8px 8px; 
    border-radius: 8px 8px 8px 8px; 
    position: absolute; 
    left: -9999em; 
}

and theres a css that do a reset：

* { 
    margin: 0; 
    padding: 0; 
}

感谢您的任何帮助。

来源

2012-12-21 Masu

给'clear：both'一个机会，或者用'display：inline-block'来做诡计...... – yckart

SOLUTION：

确定这个问题是窃听我一段时间，我不明白这是为什么。我注意到sales_ph_num div和nav_bar div之间有一些额外的1或2像素的空白，应该没有。然后我看到我正在使用内联块，在SO上搜索内联块和不明空白，然后你就去了。我使用了2或3个div的内联块，并且它添加了额外的空白，因为每个盒子都有一个宽度，所以内容溢出。

，如果你有并排两个div侧，一个DIV为内联，和其他inline-block的，并且您将div标签在不同的行HTML，则将添加空格：

<div class="container_1000px"> 
    <div class="container"> 
     My content. 
    </div> 
    <div class="next_container"> 
     Next content. 
    </div> 
</div> 

.container_1000px 
{ 
    width: 1000px; 
} 
.container 
{ 
    display: inline; 
    width:960px; 
} 
.next_container 
{ 
    display: inline-block 
    width: 40px; 
}

这将溢出，因为额外的空格被添加到内联和内嵌块div之间。

解决方法是将每个div放在一行上。

<div class="container_1000px"><div class="container">My content.</div><div class="next_container">Next content.</div></div>

并且不会增加额外的空格。再次感谢。

任何人都可以解释我为什么会这样，为什么它应该/不应该？

来源

2012-12-23 19:00:01 Masu

从div.ad_banner取出top: -61px;。

此外，如果你有一个载入画面，我会建议有某种简单的动画只是所以它看起来并不像网页已经死亡。

来源

2012-12-21 21:23:02 qooplmao

您已将right_side_header类限制为763px，并且您的sales_ph_num类限制为110px。

但上的jsfiddle您已设置900px和137px respectevly。

只需在jsfiddle上设置相同的值即可。 =））

来源

2012-12-21 21:23:57

内容溢出的div

回答

相关问题