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/