2012-10-20 87 views
1

我已經遍尋搜索這個網站,找不到解決我的問題的方法。首先,這是我的問題的一個形象。 (div與「sssss」應該垂直擴展)。所以div的內容在碰到邊界時應該到達下一行。任何建議非常感謝。Div不會隨着內容擴展

Image

這裏是我的代碼。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Title</title> 
    <LINK rel=StyleSheet href="styles/StyleSheet.css" type="text/css" media=screen> 
</head> 
<body> 
    <form id="Form1"> 
    <div id="header"> 
     <div id="header-center"> 
      <div id="logo">Logo</div> 

      <div id="search-user"> 
       <form action="" id="SearchUser"> 
        Search User: <asp:TextBox ID="TextBox1" runat="server">   </asp:TextBox> 
       </form> 
      </div> 
     </div> 


     <div id="nav-menu"> 
      <ul> 
       <li><a href="#">Account</a></li> 
       <li><a href="#">Burndown Chart</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Reports</a></li> 
       <li><a href="#">Extra</a></li> 
       <li><a href="#">Extra</a></li> 
      </ul> 
     </div> 
    </div> 

    <div id="wrapper">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div> 


    </form> 
</body> 
</html> 

CSS

html, body 
{ 
padding: 0px; 
margin: 0px; 
text-align: center; 
background-color: #f3f4f9; 
font-family: Verdana; 
border: 0px; 
} 

#header 
{ 
width: 100%; 
background-color: #0066CC; 
} 

#header-center 
{ 
margin: 0 auto; 
width: 800px; 
height: 80px; 
} 

#logo 
{ 
float: left; 
margin-top: 13px; 
height: 50px; 
font-size: 40px; 
color: White; 
font-weight: bold; 
} 

#search-user 
{ 
float: right; 
color: White; 
font-size: 11px; 
font-weight: bold; 
margin-top: 25px; 
} 

#nav-menu 
{ 
width: 100%; 
margin: 0 auto; 
border-top: 1px solid #003366; 
clear: both; 
} 

#nav-menu ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
height: 48px; 
background-image: url(../images/menu-ul-bg.png); 
} 

#nav-menu ul li 
{ 
display:inline; 
line-height: 50px; 
} 

#nav-menu ul li a 
{ 
padding: 0px 40px 0px 40px; 
text-decoration: none; 
color: Black; 
font-size: 14px; 
} 

#nav-menu ul li a:hover 
{ 
color: White; 
} 

#wrapper 
{ 
margin: 0 auto; 
width: 200px; 
border: 1px solid black; 
} 
+0

這可以幫助你https://developer.mozilla.org/it/docs/CSS/hyphens。 您很可能不會有超過25個字符的單詞。適當的話將正確分解並向下流動。 – VKen

回答

1

這是因爲你有一個長字符串,瀏覽器不會自行斷開。如果使用CSS3 word-break自動換行屬性,高度將自動調整,如果您將其分解爲smaller words

例:word-break:break-all;

+1

哇,偉大的人!非常感謝!謝謝! – user1761715

0

您需要添加到您的#wrapper指定樣式:

word-wrap: break-word; 

這將制動長單詞像 'ssssssssssssssssssssssss' 之一,使它沿着div寬度。