1

我已经搜索了这个网站，找不到解决我问题的方法。首先，这是我的问题的图像。（带有“sssss”的 div 应该垂直扩展）。所以 div 的内容在碰到边界时应该转到下一行。非常感谢任何建议。

图片

这是我的代码。

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;
}
4

2 回答 2

1

这是因为您有一个长字符串，浏览器不会自行中断。如果您使用 CSS3 word-break或word-wrap属性将其分解为更小的单词，高度将自动调整。

前任：word-break:break-all;

于 2012-10-20T15:51:31.627 回答
0

您需要添加到您的#wrapper 样式：

word-wrap: break-word;

这将阻止像'ssssssssssssssssssssss'这样的长词，并使其沿着divs宽度。

于 2012-10-20T15:50:19.673 回答