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避免在下一行渲染新的。样本放在下面提到的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  
|                         |
+------------------------+

Answer 4

如果你将剩下的一切都包括在内，包括包含div，它就会起作用。

Answer 5

今天的现代解决方案将是

#child_container {
    display: flex;
}

因为flex-wrap默认设置为

flex-wrap: nowrap;

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

Answer 6

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

展开内容宽度的容器div

6 个答案: