用内容宽度展开容器 div答案

【问题标题】：Expand container div with content width用内容宽度展开容器 div
【发布时间】：2011-09-01 04:51:48
【问题描述】：

我的应用程序中有以下结构：

<div id="container">
  <div id="child_container">
    <div class="child"></div>
    <div class="child"></div>
    ...
    <div class="child"></div>
  </div>
</div>

每个子 div 都有一个已知的固定宽度，但应用程序允许将更多子 div 插入到 child_container div 中。

考虑到子容器的总宽度，我想做的是让容器 div 在需要时水平扩展。

这是目前发生的情况：

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

如果我将 child_container div 宽度设置为固定值，我可以让它水平扩展超过容器 div，尽管有点难看，但它仍然有效：

+------ container -------+
+------ child_container -+----+
| child1 child2 child3 child4 |
+------------------------+----+

但是，这需要在添加新孩子时重新计算。

有没有办法在不为子容器使用固定宽度的情况下做到这一点，最终结果是

+--------- container ---------+
+------ child_container ------+
| child1 child2 child3 child4 |
+-----------------------------+

谢谢。

【问题讨论】：

请提供一些代码。在小提琴中更好。
这里是：jsfiddle.net/8XGqs
jsfiddle.net/8XGqs/1 更好地说明了上面的 ascii 艺术的等价物，我认为。刚刚将 width:100% 添加到#container。

标签： css containers expand

【解决方案1】：

这样的事情应该可以工作：

#container, #child_container, .child { 
    position: relative; 
    float: left;
}

【讨论】：

@thirtydot 因为某些浏览器如何呈现 html。不告诉它位置，一些浏览器不会使用“子”元素的大小来增加容器的大小
这很好......虽然你可能不需要position:relative;
@wajiw：哪些浏览器？我假设您正在谈论一些非常旧的浏览器。
@thirtydot 是的，这更像是我使用 IE6/7 的习惯 =) 现在不那么相关了，但它是容器的一个好习惯。
你能看看jsfiddle.net/8XGqs/1 吗？它似乎不适用于该示例，即使所有内容都有“float:left;”。

【解决方案2】：

更简单：

<style>
    #container{ display: inline-block; }
</style>

【讨论】：

这个answer很容易处理

【解决方案3】：

添加子元素时父容器不会增长。

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

但是我们可以通过使用 css3 flex box 来避免在下一行渲染新的。样品放在下面提到的path

  .products{
            display: -webkit-flex;
            -webkit-flex-flow: row;
            /*-webkit-justify-content: center;*/
        }
        .products > div{
            padding: 0 4em;
        }

结果将如下所示：

+--- child_container ----+|
| child1 child2 child3  ch|ild4 child5  
|                         |
+------------------------+

【讨论】：

但是容器的宽度没有变大，是吗？

【解决方案4】：

如果你浮动所有剩下的东西，包括包含的 div，它会起作用。

【讨论】：

【解决方案5】：

今天的现代解决方案是

#child_container {
    display: flex;
}

因为flex-wrap 默认设置为

flex-wrap: nowrap;

这个简单的解决方案就像一个魅力。到现在为止，所有相关的浏览器也一样。

【讨论】：

【解决方案6】：

只需将父级的宽度设置为 120% 并完成 =)

【讨论】：

这将允许更多的元素，更多的东西进来呢？