文本沒有被包含

我做了一個非常基本的佈局。文本沒有被包含

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

這並不能完全解決我的問題，因爲剩下的文本不會顯示在單獨的行中。 –

文本沒有被包含

回答

相關問題