CSS 相对 div 的宽度由绝对 div 自动扩展答案

【问题标题】：CSS relative div's width auto extend by absolute divCSS 相对 div 的宽度由绝对 div 自动扩展
【发布时间】：2014-04-21 14:09:31
【问题描述】：

是否可以让父级（位置：相对）通过其绝对子级自动扩展其宽度？这是我的 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。有谁知道该怎么做？

非常感谢。

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试

overflow:auto;

为父母;

【讨论】：

这限制了容器的可见区域，但并没有真正完成问题的要求。在你的答案中提供更多细节来解释你的推理，这样即使这个特定的技巧不能帮助回答这个问题，其他人也会从讨论中受益。