扩展父级 div 的宽度以适应其浮动子元素

Question

扩展父级 div 的宽度以适应其浮动子元素

htmlcsslayout

6

我有一个父级 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;
}

- Yarin

你最终解决了如何做这个问题吗？ - Jonathan Maddison

好的，看起来最简单的方法是使用JavaScript动态增加/减少容器元素的宽度，在具有溢出的父级元素中。 - Jonathan Maddison

3个回答

3

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

有一篇关于定位和清除 div 的很棒的文章在 A List Apart 上，这里（在文章的末尾）。

- user641656

@Nathan- 谢谢，但是你的示例不能让父级div溢出其容器。请参见http://jsfiddle.net/dSjv4/14/。 - Yarin

1

您可以为父元素添加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

@Sotiris- 谢谢，但是你的例子无法让父级 div 溢出其容器。请参见 http://jsfiddle.net/8JJSf/4/. - Yarin

@Yarin 正确，要让容器溢出，还需要为 #stretchable-div 设置 position:absolute。 - Sotiris

@Sotiris- 是的，那个方法可行，但你就不需要 display:block-inline 了，对吧？ - Yarin

@Yarin 是的，在这种情况下不需要。 - Sotiris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Loktar · Accepted Answer

在这个例子中，可伸缩的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>