0

親 div が内部 div に合わせて拡張されないのはなぜですか?

<div style="width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;">
<div style="float: left; width: 500px; border-bottom: 1px solid black;">
    Menu
</div>
<div style="float: left; width: 500px;">
    text goes here
</div>

http://jsfiddle.net/C7MHY/1/

4

5 に答える 5

1

内側の div が浮いているためです。フローティング div の後に"clearer" (CSS プロパティがまたはclearに設定された要素) を追加して、目的を達成することができます。leftboth

float: leftまたは、外側の div に追加することもできます。別の浮動要素内のすべての浮動要素は「自動的にクリア」されます。

http://jsfiddle.net/vovkss/WcSyM/を参照してください。

于 2013-07-04T19:18:34.797 に答える
0

親 div には高さがありません。height:auto を使用してみてください。

于 2013-07-05T07:47:03.580 に答える
0

どう説明したらいいのかわかりませんが、親 DIV に display: table を置けばうまくいきます。

<div style="display: table; width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;">
    <div style="float: left; width: 500px; border-bottom: 1px solid black;">
        Menu
    </div>
    <div style="float: left; width: 500px;">
        text goes here
    </div>
</div>
于 2013-07-04T19:19:28.313 に答える
0

内側の div は float としてスタイル設定されているためです。これを克服するには、次のような別の内部 div を追加する必要があります。

<div style="width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;">
<div style="float: left; width: 500px; border-bottom: 1px solid black;">
    Menu
</div>
<div style="float: left; width: 500px;">
    text goes here
</div>
<div style="clear:both;"></div>
</div>

さらに読むために:
MDN: float
MDN: clear

于 2013-07-04T19:18:37.857 に答える