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

これは、ブラウザがそれ自体で壊れない長い文字列が1つあるためです。CSS3のword-breakまたはword-wrapプロパティを使用する場合、高さを小さな単語に分割すると、高さが自動的に調整されます。

元：word-break:break-all;

于 2012-10-20T15:51:31.627 に答える
0

#wrapperスタイリングに追加する必要があります。

word-wrap: break-word;

これにより、「sssssssssssssssssssssss」のような長い単語にブレーキがかかり、divの幅に沿って進みます。

于 2012-10-20T15:50:19.673 に答える