位置:绝对和父高？

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个方格之间,而不是它们之后.

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

您可以使用网格来做到这一点：

article {
  display: grid;
}
    
.one {
  grid-area: 1 / 1 / 2 / 2;
}
    
.two {
  grid-area: 1 / 1 / 2 / 2;
}

Answer 3

这是我的解决方法,
在您的示例中,您可以添加第三个元素,其中包含.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;
}