0

そのようなコード:

<html>
<head>
<style type="text/css">
html, body {height:100px; width:200px}
body {margin:0}
</style>
</head>
<body>
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>
</body>
</html>

すべてのブラウザーで、2 番目にネストされた DIV が親 DIV の外に表示されるようにします。

間違った HTML 出力

ここで、ネストされたすべての DIV が親 DIV 内に表示されることを期待しています。

予想される HTML 出力

親 DIV のサイズに関係なく、黄色の DIV が残りの幅を埋めるようにします。

html, body {height:100px; width:200px}まともなサイズのスクリーンショットを作成するためだけに作成されていることに注意してください。そのはずhtml, body {height:100%; width:200%}

アップデート

のコードdisplay: inline-block:

<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px; display:inline-block;">
</div>
<div style="background:yellow; height:100%; display:inline-block;">
lalala
</div>
</div>

生産する

ここに画像の説明を入力

4

3 に答える 3

2

この場合、position:absolute または float:left のいずれかを使用できます。

position:absolute の例は、上記の Ankit によって回答されています

于 2013-06-27T15:46:22.467 に答える
2

緑の div には float left を使用できます。

<body>
    <div style="background:red; height:100%">
        <div style="background:green; height:100%; width:50px; display:inline-block; float:left"></div>
        <div style="background:yellow; height:100%;"></div>
    </div>
</body>

html/body または赤いコンテナー div の幅を変更すると、黄色の div が適切に拡大/縮小されます。

http://jsfiddle.net/RapKB/1/

編集：おっと、インラインブロックは必要ありません。

于 2013-06-27T15:56:44.703 に答える