我在我的应用程序有以下结构:
- <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,尽管有点丑:
- +------ container -------+
- +------ child_container -+----+
- | child1 child2 child3 child4 |
- +------------------------+----+
但是,这需要重新计算它,每当一个新的孩子被添加。
有没有办法做到这一点,而不使用固定宽度的子容器,在某种程度上,最终的结果是
- +--------- container ---------+
- +------ child_container ------+
- | child1 child2 child3 child4 |
- +-----------------------------+
谢谢。
解决方法
这样的东西应该工作:
- #container,#child_container,.child {
- position: relative;
- float: left;
- }