Question

在一个容器中，您可以以任何方式将两个位于彼此之上（例如绝对），并使容器扩展到最大容器的大小/高度？

如果使用position: absolute，则容器不会扩展到定位元素的大小。

有没有办法通过CSS获得此效果？

说明性（已解散）示例：

<div class="wrap">
    <div class="foo">foo</div>
    <div class="bar">bar</div>
</div>

CSS：

.wrap{
    position: relative;
}
.foo{
    height: 40px;
}
.bar{
    height: 60px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

jsFiddle：http://jsfiddle.net/qjFR9/

我想将.bar置于.foo之上（位置.bar，好像没有.foo），而.wrap应该是{{1}}的高度最大的孩子。

Answer 1

如果容器的宽度是固定的，那么这样的解决方案就可以了：

<div class="wrap">
    <div class="foo"><div class="inner">foo</div></div>
    <div class="bar"><div class="inner">bar</div></div>
</div>

CSS：

.wrap{
    overflow: auto;
}
.wrap,
.wrap .inner{
    width: 300px;
}
.wrap > div{
    float: left;
    width: 0;
}

/* test: .wrap expands to fit the .inner content */
.bar > .inner{
    height: 60px;
}

jsFiddle demo

但这不适用于非固定宽度包装器。

有更好的方法吗？

扩展到最大的“定位”区块？

1 个答案: