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

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>  的CSSarticle {    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个正方形之间，而不是在它们后面。http://jsfiddle.net/Ht9Qy/有简单的解决方法吗？请注意，我不知道这些孩子的身高，也无法为容器设置高度：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;

}

Answer 2

这是我的解决方法，

在您的示例中，您可以添加第三个元素，它们具有.one和.two元素的“相同样式”，但是没有绝对位置并且具有隐藏的可见性：

的HTML

<article>

   <div class="one"></div>

   <div class="two"></div>

   <div class="three"></div>

</article>

的CSS

.three{

    height: 30px;

    z-index: -1;

    visibility: hidden;

}