水平扩展父 div 以适应其浮动子级答案

【问题标题】：Expanding a parent div horizontally to fit its floated children水平扩展父 div 以适应其浮动子级
【发布时间】：2011-03-15 03:18:31
【问题描述】：

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

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

示例（可拉伸的 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;
}

【问题讨论】：

你最终弄清楚如何做到这一点了吗？
好的，看起来最简单的方法是使用 JavaScript 动态增加/减少容器元素的宽度，在有溢出的父元素中。

标签： html css layout

【解决方案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>

【讨论】：

@Loktar- 谢谢，但我有两个问题- 请参阅我对您示例的修改版本：jsfiddle.net/seB5F/12 1) 当我添加更多元素或将绝对 div 向右推时，元素开始包裹在框架的边缘。 2）我还添加了溢出：隐藏到父div，但仍然看到所有可拉伸的div。为什么我不能将可拉伸的 div 拉伸到宽度，并隐藏任何溢出？你能解释一下吗？
可以回答第一个问题，因为绝对位置，把它从文档流中拿出来，所以溢出对可拉伸div没有影响，把它改成相对并隐藏跨度>
@Loktar-您回答了我的问题，但我仍然有一个问题-我希望隐藏溢出。为此，我需要使容器位置：相对，但这会导致内容包装。有什么想法吗？
嗯，我以为您希望内容可以拉伸，即使在其父级之外也是如此。现在你想要相反的，只拉伸到父母的宽度而不是隐藏？
我确实希望它们可以拉伸，但是我希望选择是否隐藏溢出。

【解决方案2】：

就像@Pizzicato 的例子，但是使用overflow:hidden 清除父级div：http://jsfiddle.net/dSjv4/。

在 A List Apart here 上有一篇关于定位和清除 div 的精彩文章（接近文章末尾）。

【讨论】：

@Nathan- 谢谢，但是您的示例不允许父 div 溢出其容器。见jsfiddle.net/dSjv4/14

【解决方案3】：

您可以为父元素添加display: inline-block;。要在 ie7 中工作，您还需要使用 display:inline;zoom:100%;。

所以你需要的可能的 css 是这样的：

#stretchable-div {
    background: none repeat scroll 0 0 red;
    display: inline-block;
    overflow: auto; /* clear the floats */
    *display:inline; /* ie7 hack even better use conditional comment */
    zoom:100%;
}

示例： http://jsfiddle.net/8JJSf/

【讨论】：

@Sotiris- 谢谢，但您的示例不允许父 div 溢出其容器。见jsfiddle.net/8JJSf/4。
@Yarin 正确，溢出它还需要position:absolute for #stretchable-div 的容器
@Sotiris- 是的，可以，但是你不需要 display:block-inline，对吧？
@Yarin 是的，在这种情况下它不是必需的。