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>

现在，如果我在 last 之后创建一个段落标签，</div>则标签的内容p不会出现在浏览器中的所有这些 div 下。有什么想法我该怎么做？

多谢你们

4

4 回答 4

6

如果您使用的是绝对定位，但您不知道所定位的高度，这是 HTML 不太擅长解决的问题。我已经看到（并且可能写过）使用 JavaScript 来定位基于offsetHeight另一个元素的元素的黑客行为。

但是您最好使用 CSSfloat属性而不是绝对定位。 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 的尺寸，或者它们可能会发生变化，那么最好使用浮动、清除和边距来布局您的元素，以实现与当前相同的布局。

如果您还没有这样做，请为 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 回答