水平扩展父div以适合其浮动的子项

Question

我有一个父div,左边有一个可变数量的同等大小的子div.我希望父div扩展到子节点的宽度,无论如何,即使它意味着溢出自己的容器.

有没有办法用HTML/CSS自然地做到这一点？

示例(可拉伸的div最终会变宽180px):

HTML:

<div id="stretchable-div">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    ...
</div

CSS:

.child {
   width: 60px;
   height: 60px;
   float:left;
}

Answer 1

在这个例子中,stretchchable-div元素将从其父元素中消失,并延伸到其子元素.

现场演示

CSS

#parent{
    width:200px;
    height:180px; 
    background:red;
}

#stretchable-div{
    background:blue;
    position: absolute;
}

.child {
   width: 60px;
   height: 60px;
   float:left;
}

标记

<div id="parent">Im a parent
    <div id="stretchable-div">
        <div class="child">a</div>
        <div class="child">b</div>
        <div class="child">c</div>
        <div class="child">c</div>
        <div class="child">c</div>
        <div class="child">c</div>
        <div class="child">c</div>
    </div>
</div>