css - 在彼此下方显示相关容器(高度可变)

Question

我有一些相对定位的容器(高度不同)，我想将它们显示在彼此之下。发生的事情是它们显示在彼此之上(参见 fiddle )。

我在容器上使用 position:relative 因为我希望子元素具有 position:absolute 并相对于它们的容器显示。例如，我认为可能有一个固定高度的快速修复，但这不是很灵活，我的容器(或它们的 child )的高度会有所不同。

Desired result - fiddle

Actual result - fiddle

代码:

<style type="text/css">
.outside
{
    position:relative;
    border:1px solid red;
}

.inside
{
    position:absolute;
    top:0;
    left:0;
}
</style>

<div class="outside">
    <div class="inside"><p>absolute 1</p></div>
</div>
<div class="outside">
    <div class="inside"><p>absolute 2</p></div>
</div>
<div class="outside">
    <div class="inside"><p>absolute 3</p></div>
</div>

Answer 1

当你在一个relative元素中放置一些absolute时，这个相对元素不会考虑absolute元素的宽度或高度，所以只需添加一个height:30px; - DEMO -

如果您不希望有一个固定的高度，那么至少使用一个min-height。 - DEMO -