我的应用程序具有以下结构:
<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;
}