文本没有被包含

我做了一个非常基本的布局。文本没有被包含

HTML

<div id="container"> 
    <div id="logocontainer"> 
    </div> 
    <div id="navigationcontainer"> 
    </div> 
    <div id="textcontainer"> 
    </div> 
    <div id="sidebarcontainer"> 
     TEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXT. 
    </div> 
</div>

CSS

* { 
margin:0; 
padding:0; 
} 
#container { 
margin:0px auto; 
width:600px; 
height:1000px; 
background:red; 
} 
#logocontainer { 
float:left; 
width:50%; 
height:15%; 
background:green; 
} 
#navigationcontainer { 
float:right; 
width:50%; 
height:15%; 
background:orange; 
} 
#textcontainer { 
margin:10px; 
float:left; 
width:70%; 
height:83.2%; 
background:purple; 
} 
#sidebarcontainer { 
margin:10px; 
float:right; 
width:23.33%; 
background:yellow; 
}

文本中的流动，即使我设置了DIV保证金其边界以外。

有人能告诉我问题是什么吗？

谢谢，

SenileSage。

来源

2012-09-15 Tashfiq C.

大多数浏览器不知道如何打破这么长的单词，你必须给它一点帮助。

将word-break:break-all;加到#sidebarcontainer。这里有一些关于W3Schools的更多信息。

来源

2012-09-15 06:54:40 FluffyJack

考虑为不支持CSS3属性的浏览器添加'overflow：hidden;'。 – jimp

对不起。 @ jimp是正确的。由于Firefox和Opera尚未完全支持这一点，因此您需要添加“overflow：hidden”;不是最好的情况，但比它看起来很奇怪。请记住，虽然你谈论的这个'错误'案例很少见。 – FluffyJack

谢谢，你的解决方案效果很好。 –

问题是您的文本没有空白，因此无法换行。如果您将overflow:hidden;添加到#sidebarcontainer它将隐藏溢出并保留您的布局。

来源

2012-09-15 06:55:22 jimp

这并不能完全解决我的问题，因为剩下的文本不会显示在单独的行中。 –

文本没有被包含

回答

相关问题