html - CSS相对div的宽度自动扩展绝对div

Question

是否可以让父级(position:relative)自动扩展其绝对子级的宽度？这是我的 jsfiddle 链接:http://jsfiddle.net/YD2Xu/

理想的是#container 和#full-width 应该与#large-width 具有相同的宽度。

CSS:

#container {
    position: relative;
    border: 1px solid green;
}
#large-width, #full-width {
    display: table;
    position: absolute;
}
#large-width {
    white-space: no-wrap;
    width: 1500px;
    height: 200px;
    border: 1px solid red;
}
#full-width {
    top: 30px;
    width: 100%;
    border: 1px solid blue;
}

HTML:

<div id="container">
    <div id="large-width">
        this is large width
    </div>
    <div id="full-width">
        this is full width
    </div>
</div>

我需要通过 css 来实现，不要使用 javascript。有谁知道该怎么做？

非常感谢。

Answer 1

如果子元素的位置是绝对的，则不能根据子元素的大小展开父元素的div，因为具有绝对位置的元素已从流中移除，因此它们的大小甚至被包括父元素在内的其他元素忽略。您可以使用 CSS 或使用 javascript 设置固定大小。