html - 水平扩展父 div 以适应其 float 的子元素

Question

我有一个父 div，其中有可变数量的大小相等的子 div 向左浮动。我希望父级 div 无论如何都扩展到子级的宽度，即使这意味着溢出它自己的容器。

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

示例(可拉伸(stretch)的 div 最终宽度为 180 像素):

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

在此示例中，stretchable-div 元素将从其父元素中脱离出来，并延伸到其子元素。

Live Demo

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>