11

これを行う方法を考えていましたが、現在のマークアップは次のとおりです。

<div id="playArea" style="position: relative;">
    <div id="widget1" class="widget" style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div id="widget2" class="widget" style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div>
    <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div>
</div>

ここで、最後の の後に段落タグを作成する</div>と、タグのコンテンツがpブラウザーのこれらすべての div の下に表示されません。どうすればこれを行うことができますか？

みんなありがとう

4

4 に答える 4

6

絶対配置を使用しているが、配置している物の高さが分からない場合、これは HTML がうまく解決できない問題です。JavaScript を使用して要素を別の要素に基づいて配置するハックを見た (そしておそらく書いた) ことがありますoffsetHeight。

floatただし、絶対配置の代わりに CSS プロパティを使用した方がよい場合があります。float自動ページフローを犠牲にすることなく、好きなように配置するのclearに非常に適しています.

于 2009-12-23T22:02:26.617 に答える
2

playArea に高さの値を指定する必要があります。絶対 div は親を展開しません。

于 2009-12-23T22:00:00.143 に答える
0

絶対配置された要素は playArea div のボックスを「満たす」わけではないため、各子 div に割り当てる高さと幅は、playArea の高さと幅を拡張しません。あなたが解決しようとしている最終的な問題が何であるかはわかりませんが、ID の名前から、「キャンバス」領域内に要素を配置しようとしています。これはいい。

絶対配置された div の高さと幅も、playArea div のサイズには影響しませんが、高さと幅を知ることで、playArea にそのサイズがどうあるべきかを伝えることができます。この場合、playArea に幅 580px、高さ 785px を指定すると、p 要素が正しく配置されます。

再び div id から離れて、含まれる要素が通常のページ要素のように配置されない (絶対配置かどうかに関係なく) playArea のようなもののサイズを明示的に定義することをお勧めします。そうすれば、より予測可能なレイアウトが得られます。

于 2012-02-09T23:21:57.687 に答える
0

この場合の playArea div は、要素に合わせて幅/高さを自動的に拡張しません。また、高さが定義されていないため、スペースを占有しないものとして扱われます (つまり、

タグは div と同じ場所に表示されます)。

事前に playArea div のサイズがわからない場合、または変更される可能性がある場合は、float、clear、および margin を使用して要素をレイアウトし、現在と同じレイアウトを実現することをお勧めします。

まだ行っていない場合は、Firefox 用のFirebugプラグインを入手してください。これにより、CSS を編集してその場で変更を確認できるため、CSS ライフが無限に簡単になります。ただし、他のブラウザでもテストすることを忘れないでください。

編集：フロートを使った例を次に示します（急いで行ったので完璧ではないかもしれません）

<div id="playArea" style="float: left;">
    <div id="widget2" class="widget" style="background-color: green; float: left; margin-left: 63px; margin-top: 35px; width: 80px; height: 42px;">World</div>
    <div id="widget1" class="widget" style="background-color: red; float: left; margin-left: 152px; margin-top: -1px; width: 313px; height: 269px;">Hello</div>
    <div style="background-color: blue; float: left; clear: left; margin-left: 534px; margin-top: 26px; width: 183px; height: 251px;">Bye</div>
</div>
<p style="clear: both; float: left;">Test P Element</p>
于 2009-12-23T22:18:30.637 に答える