CSS：绝对定位的替代方法

Question

我有以下标记：

<div id="playArea" style="position: relative;">
    <div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div 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>

但是我想在“playArea”div 下有一段文本，但因为 playArea 内的所有 div 都是绝对的，所以文本不会出现在最后一个绝对定位的 div 的底部。

我对此进行了研究，并找到了使用 float:left 和 clear:left 的替代方法，但是在第一个 div 上使用此方法后，您无法正确定位 div，因为第二个 div 的起点位于第一个 div 下方，而不是在 (0,0)。关于如何解决这个问题的任何想法。

谢谢

Answer 1

如果我理解正确的话，你只需给“playArea”div正确的高度即可。

编辑：我的意思是，其中所有内容的总高度。

Answer 2

但是我想在“playArea”div下有一段文本，但是因为playArea中的所有div都是绝对的，所以文本不会出现在最后一个绝对定位的div的底部。

你似乎已经知道了所有的尺寸和位置，只需添加另一个绝对定位的 div 并将相对内容放入其中即可。

我对此进行了研究，并找到了使用 float:left 和 clear:left 的替代方法，但是在第一个 div 上使用此方法后，您无法正确定位 div，因为第二个 div 的起点位于第一个 div 下方，并且不在 (0,0) 处。关于如何解决这个问题的任何想法。

您需要删除

position: absolute

才能使浮动正确。只要宽度和高度就足够了。

Answer 3

向左浮动三个内部 div，将

overflow: hidden;

放在 playArea div 上，然后将

<p>

放在三个内部 div 下，并使用

clear: both;

Answer 4

在阅读了您和“BalusC”之间的评论后，您似乎已经修改了 CSS，现在正在尝试浮动您的项目，并使用 margin-top 和 margin-left 进行定位。您完全可以这样做，但是您忘记了您也可以使用负边距来定位元素。例如，如果您使用 margin-top:-10px; 那么它会将元素向上拉（而不是像正常的正值边距一样将其向下推）。所有其他边距也是如此。

这似乎是你现在所缺少的成分。