2

コンテナが1つあり、float：leftが子divの中にあります。問題は、float：leftを子divに適用するとすぐに、親divの背景が完全に失われることです。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div style="background: #CCC; width:100%; position:relative;">
            <div style="float:left;">
                This is some text
            </div>
        </div>
    </body>
</html>

誰かがこれを修正する方法を教えてもらえますか？

4

2 に答える 2

4

floatheight以下でそれらをクリアするか、明示的に指定しない限り、要素はありませんheight

これを試して、

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div style="background: #CCC; width:100%; height:50px;position:relative;">
            <div style="float:left;">
                This is some text
            </div>
        </div>
    </body>
</html>

また

 <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div style="background: #CCC; width:100%; position:relative;">
            <div style="float:left;">
                This is some text
            </div>
            <div style='clear:left'></div>
        </div>
        
    </body>
</html>

overflowまたは、この要素設定のハックを使用します。

 <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div style="background: #CCC; width:100%; overflow:hidden;position:relative;">
            <div style="float:left;">
                This is some text
            </div> 
        </div>
        
    </body>
</html>

于 2012-10-06T14:55:55.457 に答える
0

ああ、あなたはそれに私を打ち負かしました...

あなたの内側（入れ子）divは浮いているので、あなたの外側divは崩壊しています。いくつかのオプションがあります。

  1. clearフロートdiv内に空のdivを配置します
  2. overflow:hidden外側のdivにスタイルを適用します
  3. 内側のdivを削除し、外側のdivをフロートさせます
于 2012-10-06T15:00:38.927 に答える