用内容宽度扩展容器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 |
+-----------------------------+

谢谢。

已邀请:

6 个回复

社攻取墟槽

这样的事情应该起作用：

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

募磷

更简单：

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

漂截嘘

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

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

杰黔轿缺

如果您浮动剩下的所有内容（包括包含div的内容），它将起作用。

拟僚疽刊剔

今天的现代解决方案是

#child_container {
    display: flex;
}

因为默认情况下将“ 10”设置为

flex-wrap: nowrap;

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

冲汉

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

要回复问题请先登录或注册

用内容宽度扩展容器div

6 个回复

发起人

containers

expand

css

问题状态

用内容宽度扩展容器div

与内容相关的链接

6 个回复

发起人

containers

expand

css

问题状态