扩展包含内容宽度的容器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。 我想做的是，在需要时使容器div水平扩展，给出子容器的总宽度。目前的情况如下：

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

如果我将child_container div的宽度设置为固定值，我可以使它在水平方向上扩展到超出container div，虽然这有点丑陋，但是这种方法可行：

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

然而，这需要在添加新子元素时重新计算。

有没有一种方法可以不使用固定宽度的子容器来实现这一点，以便最终结果是

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

感谢。

- Andre

---

请提供一些代码。在 fiddle 上更好。 - Ortiga

这是它的链接：http://jsfiddle.net/8XGqs/ - Andre

http://jsfiddle.net/8XGqs/1/ 更好地展示了上面的 ASCII 艺术等效物。我认为只需将 width:100% 添加到 #container 即可。 - Andre

Answer 1

更简单的方法：

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

- Nate Barr

---

根据这个答案，易于处理。 - Nate Barr

Answer 2

类似这样应该可以工作：

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

- wajiw

---

由于某些浏览器呈现HTML的方式不同，如果没有指定位置，一些浏览器将不使用“子”元素的大小来增加容器的大小。 - wajiw

这很好...尽管您可能不需要 position:relative;。 - Jason Gennaro

@thirtydot，是我习惯性地使用IE6/7工作的习惯 =)，虽然现在不那么相关了，但这对于容器来说是一个很好的实践。 - wajiw

@Andre 我现在明白你想要的了。我已经更新了你的代码以解决问题。在容器上使用 'white-space:nowrap;'，移除子元素的浮动，并添加 'display:inline-block;' 将会在不希望子元素换行时创建一个滚动条。 - wajiw

使用PatrikAkerstrand在https://dev59.com/Dm445IYBdhLWcg3wBVzz提供的解决方案进行修复。 - Andre

Answer 3

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

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

但是，我们可以使用CSS3弹性盒子避免在下一行呈现新的内容。示例位于下面提到的路径中。

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

- user2364729

---

但是容器的宽度没有增加，怎么办？ - alumi

Answer 4

如果你将包含的div和所有元素都向左浮动，那么它就会起作用。

- AlbertVo

Answer 5

现代IT技术的解决方案是：

#child_container {
    display: flex;
}

因为默认情况下，flex-wrap 被设置为

flex-wrap: nowrap;

这个简单的解决方案非常好用。而且现在在所有相关的浏览器中也能使用。

- Juuro

Answer 6

只需将父元素的宽度设置为120％，就完成了 =）

- matmancini

---

那将允许更多的元素，那么更多的东西会进来吗？ - Om Shankar