Question

我想知道如何做到这一点，我目前的标记如下：

<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下面。我有什么想法可以做到这一点？

谢谢你们

Answer 1

如果你使用的是绝对定位，但是你不知道你所定位的高度，那么这就是HTML不太适合解决的问题。我已经看过（也可能是写过）hacks，其中JavaScript用于根据另一个的offsetHeight来定位元素。

但是你可能最好使用CSS float属性而不是绝对定位。 float和clear非常适合定位您想要的内容，而不会牺牲自动页面流。

Answer 2

你必须给playArea一个高度值，绝对div不会扩展他们的父

Answer 3

在这种情况下，playArea div不会自动扩展宽度/高度以适应其中的元素，并且因为它没有定义高度，所以它被视为不占用任何空间（这意味着

< p>标签将出现在与div相同的位置。

如果您事先不知道playArea div的尺寸或者它们可能会发生变化，那么最好使用float，clear和margin来布局元素，以实现您目前获得的相同布局。 / p>

如果您还没有这样做，请获取适用于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>

Answer 4

因为绝对定位的元素不会“填充”playArea div的框，所以为每个子div分配的高度和宽度不会扩展playArea的高度和宽度。我不确定你要解决的最后一个问题是什么，但是从你的id的名字来看，你试图将元素放在“画布”区域内。这很好。

绝对定位的div的高度和宽度再次对playArea div的尺寸没有影响，但是通过知道高度和宽度，你可以告诉playArea它的尺寸应该是什么。在这种情况下，给playArea一个宽度为580px，高度为785px将正确定位p元素。

再次离开你的div id，最好明确定义像playArea这样的东西的尺寸，其中包含的元素不像普通页面元素那样布局（绝对定位或不定位）。这样，您将拥有更可预测的布局。

CSS：在绝对定位div之后有一个div

4 个答案: