使用内容宽度扩展容器 div

Question

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

<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 |
+-----------------------------+

谢谢。

Answer 1

更简单：

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

Answer 2

像这样的东西应该有效：

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

Answer 3

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

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

但我们可以通过使用 css3 flex box 避免在下一行渲染新的。该示例放置在下面提到的 路径

  .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  
|                         |
+------------------------+

Answer 4

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

Answer 5

今天的现代解决方案是

#child_container {
    display: flex;
}

因为 flex-wrap 默认设置为

flex-wrap: nowrap;

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

Answer 6

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