位置：绝对身高和父母身高？

Question

我有一些容器，他们的孩子只是绝对的/相对的。如何设置容器的高度，以便他们的孩子进入其中？

这是代码：

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

这是一个jsfiddle。我希望“栏”文本出现在4个正方形之间，而不是在它们后面。

有简单的解决方法吗？

请注意，我不知道这些子项的高度，也无法为容器设置高度：xxx。

Answer 1

如果我了解您要正确执行的操作，那么我认为使用CSS保持孩子的绝对位置是不可能的。

绝对定位的元素已从文档流中完全删除，因此它们的尺寸不能更改其父级的尺寸。

如果 确实 必须在将子代保持为的同时实现这种影响，则position: absolute可以使用JavaScript通过在呈现后定位绝对子代的高度，并使用其来设置父代的高度来确定高度。

或者，只需使用float: left/float:right和页边距即可获得相同的定位效果，同时将子级保留在文档流中，然后可以overflow:hidden在父级上使用（或任何其他clearfix技术）以使其高度扩展到其子级。

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}