场景: 一个标题 DIV 和三个 DIV 并排向左浮动。
问题: 来自 HEADER_A div 的“文本”溢出到 HEADER_B DIV 等等。
屏幕截图/CSS:
alt text http://thumb0.webshots.net/t/74/174/8/92/12/2239892120105349420zNlkOc_th.jpg
#header{
height:127px;
width: 718px;
}
#header_a {
width:181px;
height: 127px;
color:#FFFFFF;
float:left;
}
#header_b{
width: 363px;
float:left;
height: 127px;
/*background-image:url(../images/logo.jpg);*/
background-position:bottom;
background-repeat:no-repeat;
background-color:#006600;
}
#header_c{
width: 174px;
float:left;
height: 127px;
}
<div id="header">
<div id="header_a">ddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div id="header_b"></div>
<div id="header_c"><img src="images/nuevo.png" /></div>
</div>
最佳答案
dddddddddddddddddddddddddddddddddddddddddddddddddddd 大于 181 像素。
它显然会溢出,因为它被视为一个单词并且单词没有被分解。尝试使用一些适当的文本或提供一些空间,例如“dddddddddddddd dddddddddddddddddd dddddddddddddddd”
编辑:
另一方面,图像也会发生同样的情况。因此,div 中任何大于其父级的内容都会溢出。你可以尝试使用 'overflow:hidden'
关于css - 文本溢出问题和文本非换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1113828/