2

ここで髪を引っ張っています。div のサイズを変更するコンテンツを含む 2 つの div と、すべてのコンテンツが表示され、スクロールなしのコンテンツに基づいて含まれる div が必要です。

次のマークアップは私のサイトではありませんが、必要なものを示すために作成しました。

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>

<style>

#outer{
    width:400px;
}

#innerleft{
    width:200px;
    float:left;
}

#innerright{
    width:200px;
    color:#900;
    float:left;
}

</style>

</head>
<body>

<div id="outer">
    <div id="innerleft">
        sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj
    </div>
    <div id="innerright">
        dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv
    </div>
</div>


</body>
</html>

私はすべてを試したようです！

4

3 に答える 3

5

適用word-wrap:

#outer > div
{
  word-wrap: break-word;
}

http://jsfiddle.net/NEbj7/1/

于 2012-05-01T15:26:24.280 に答える
0

自動的にサイズを変更するには、さらに追加します-％パーセンテージで、スペースを自動的に埋めます

#outer{
    width:100%; /* 100% */
}

#innerleft{
    width:50%; /* 50% */
    float:left;
    word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */
}

#innerright{
    width:50%;  /* 50% */
    color:#900;
    float:left;
    word-break:break-all;  /* Lines may break between any two characters for non-CJK scripts */
}

http://jsfiddle.net/eZpvr/1/

于 2012-05-01T15:30:29.223 に答える
0

デフォルトでは、ブラウザーは空白を含まないテキストをラップしません。ブラウザーにテキストを強制的にラップさせるには、word-wrap プロパティを #innerleft と #innerright に追加する必要があります

#innerleft, #innerright{
word-wrap: break-word;
}

参照: http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

于 2012-05-01T15:52:44.230 に答える