Position: absolute 和 parent 高度?

新手上路,请多包涵

我有一些容器,它们的孩子只是绝对/相对定位的。如何设置容器高度以便他们的孩子在其中?

这是代码:

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/

任何简单的修复?

请注意,我不知道这些孩子的身高,我无法为容器设置 height: xxx 。

原文由 Wordpressor 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 390
2 个回答

2022 年更新。这个答案已有将近 10 年的历史了。在编写它时,我们没有可用的布局技术,如 Flex 或 Grid(它们是黑暗的、hacky/有趣的时代)。

值得庆幸的是,情况有了很大改善。 Jöcker 的回答 向您展示了如何使用 Grid 实现这种布局。如果您可以忍受不支持旧版浏览器,那就去做吧!


原始答案

如果我理解您要正确执行的操作,那么我认为在保持子项绝对定位的同时使用 CSS 是不可能的。

绝对定位的元素完全从文档流中移除,因此它们的尺寸不能改变其父元素的尺寸。

如果您 真的 必须在保持孩子为 position: absolute 的同时实现这种效果,您可以使用 JavaScript 来实现,方法是在渲染后找到绝对定位的孩子的高度,并使用它来设置父母。

或者,只需使用 float: left / float:right 和 margins 来获得相同的定位效果,同时将子项保持在文档流中,然后您可以在父级上使用 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;
}

原文由 Tom Davies 发布,翻译遵循 CC BY-SA 4.0 许可协议

这是我的解决方法,

在您的示例中,您可以添加具有 .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;
    width:0!important; /* if you got unnecessary horizontal scroll*/
}

原文由 Az.Youness 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题