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

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

谢谢。

最佳答案

这样的事情应该起作用:

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

10-05 20:46
查看更多