展开容器div与内容宽度

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

<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水平扩展，尽pipe有点丑陋，

 +------ 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框避免在下一行显示新的。 样品放在下面提到的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

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