我有一些容器,它们的孩子只是绝对/相对定位的。如何设置容器高度以便他们的孩子在其中?
这是代码:
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 。
原文由 Wordpressor 发布,翻译遵循 CC BY-SA 4.0 许可协议
2022 年更新。这个答案已有将近 10 年的历史了。在编写它时,我们没有可用的布局技术,如 Flex 或 Grid(它们是黑暗的、hacky/有趣的时代)。
值得庆幸的是,情况有了很大改善。 Jöcker 的回答 向您展示了如何使用 Grid 实现这种布局。如果您可以忍受不支持旧版浏览器,那就去做吧!
原始答案
如果我理解您要正确执行的操作,那么我认为在保持子项绝对定位的同时使用 CSS 是不可能的。
绝对定位的元素完全从文档流中移除,因此它们的尺寸不能改变其父元素的尺寸。
如果您 真的 必须在保持孩子为
position: absolute
的同时实现这种效果,您可以使用 JavaScript 来实现,方法是在渲染后找到绝对定位的孩子的高度,并使用它来设置父母。或者,只需使用
float: left
/float:right
和 margins 来获得相同的定位效果,同时将子项保持在文档流中,然后您可以在父级上使用overflow: hidden
(或任何其他 clearfix 技术)使其高度扩展到其子项的高度。