3

相対的に配置された を設計しようとしてdivいますが、これは 2 つdivの で構成されます。固定された高さの子はありませんがdiv、コンテンツによって変化するため、親divは子 div の高さに合わせて拡張されます。これでデザインは正常に動作しますが、Firebug でコードを分析しているときに、bodyFirebug のタグにカーソルを合わせると、画面全体の最上部の短い部分だけが本体として表示されることがわかりました。divサイドパネルはそれを確認しました.ボディの幅は問題ありませんが、高さは0です. それはどのように可能ですか？コンテンツが絶対に配置されている場合、要素がコンテンツとともに展開されないことは知っていますが、ここでは子divs は相対的に配置されているのに、なぜ親はその内容と共に展開しないのでしょうか? フィドルはhttp://jsfiddle.net/Cupidvogel/y79NS/6/にあります。スクリーンショット (拡大して私の言いたいことを理解してください! Firefox で完全な HTML ページとしてコードを試したときです):

ここに画像の説明を入力

4

2 に答える 2

4

フロートをクリアするために使用しているCSSでは、div.clearそれ自体が左にフロートされています。つまり、ドキュメント フローの一部ではないため、何も消去できません。

削除するfloatとうまくいきます：

.clear { width: 400px; clear: both; position: relative; }

div.clearあるいは、何らかの理由でフロートされたい場合は、フロートをクリアするさまざまな方法があります。

EDIT：div.mainフロートされ、フロートされた要素が子の寸法に「スナップ」されるため、高さは520pxです。左にフロートした場合body(しないでください。良い考えではありません)、それも子の寸法に「スナップ」し、高さが 520px に設定されます。

于 2012-08-03T13:21:50.087 に答える
1

ここで起こるのは通常のブラウザーの動作です。div をフロートするため、float プロパティのために「通常の」フローにはもうありません。ボディは「そこにない」要素の高さを計算できないため、ボディは高さ0です。

div class="clear" を div class="main" から移動し、div class="clear" の float プロパティも削除して、問題を解決しました。

ビュー: http://jsfiddle.net/y79NS/8/

于 2012-08-03T14:00:27.710 に答える