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不太适合解决的问题.我已经看过(也可能是写过)hacks,其中JavaScript用于根据offsetHeight另一个元素定位元素.

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

Answer 2

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