html - CSS 使 div 填充其父级但不拉伸它

Question

我有这个 html 结构http://jsfiddle.net/aAXNm/

<div id="mainCont">
<div id="stretchParent">
    This div should make its parent bigger
</div>
<div id="fillParent">
    <span>TagItem</span>
    <span>TagItem</span>
    <span>TagItem</span>
    <span>TagItem</span>
    <span>TagItem</span>
    <span>TagItem</span>
</div>

而且我需要布局表现得像这样：#mainContdiv 有display:inline-block;并且它应该width根据#stretchParentdiv 改变它。这一切都很好，但我还需要 div#fillParent来填充它的父级，而不是让父级成长。

所以我遇到了第一种情况，我需要解决第二种情况。你有什么主意吗？

谢谢

Answer 1

不改变布局，不固定任何静态宽度。解决方案很简单。

#mainCont
{
    position: relative;
}

#fillParent
{
    position: absolute;
}

看看这里：http: //jsfiddle.net/aAXNm/8/