我有一些容器,它们的孩子只是绝对/相对定位。如何设置容器高度以便他们的孩子在里面?
这是代码:
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 个正方形之间,而不是在它们后面。
有什么简单的修复方法吗?
请注意,我不知道这些孩子的身高,也无法为容器设置 height: xxx。