html - CSS:在绝对定位的div之后有一个div

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 不太擅长解决的问题。我见过(并且可能写过)黑客攻击，其中 JavaScript 用于根据另一个元素的 offsetHeight 定位元素。

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