html - CSS Make div 填充其父元素但不拉伸(stretch)它

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>

我需要这样的布局:#mainCont div 有 display:inline-block; 它应该改变它的 width 根据 #stretchParent div。这一切都很好，但我还需要 div #fillParent 来填充它的父级，而不是让父级增长。

所以我有第一种情况，我需要得到第二种情况。你有什么想法吗？

谢谢

Answer 1

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

#mainCont
{
    position: relative;
}

#fillParent
{
    position: absolute;
}

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