展开内容宽度的容器div

Question

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

<div id="container">
  <div id="child_container">
    <div class="child"></div>
    <div class="child"></div>
    ...
    <div class="child"></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

这样的事情应该有效:

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

Answer 2

更简单:

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

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