CSS-使用内容宽度扩展容器div

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

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

谢谢。

Andre asked 2020-07-31T03:56:54Z
6个解决方案
30 votes

这样的事情应该起作用:

#container, #child_container, .child { 
    position: relative; 
    float: left;
}
wajiw answered 2020-07-31T03:57:07Z
30 votes

更简单:

<style>
    #container{ display: inline-block; }
</style>
Nate Barr answered 2020-07-31T03:57:27Z
12 votes

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

+------ 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  
|                         |
+------------------------+
user2364729 answered 2020-07-31T03:57:56Z
2 votes

如果您浮动剩下的所有内容,包括包含div的内容,那么它将起作用。

AlbertVo answered 2020-07-31T03:58:18Z
1 votes

今天的现代解决方案是

#child_container {
    display: flex;
}

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

flex-wrap: nowrap;

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

Juuro answered 2020-07-31T03:58:50Z
-8 votes

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

matmancini answered 2020-07-31T03:59:10Z
translate from https://stackoverflow.com:/questions/6115353/expand-container-div-with-content-width