Question

我有以下html（不是正确的代码，但是为了理解）

<div id=content-wrap overflow-hidden>
<div1 float-left overflow hidden> </div>
<div2 float-right overflow hidden> </div>

</div>

现在当div 1中的内容更多时，它会扩展主容器，但是右边的div2不会扩展

有没有什么方法可以让div2在不改变html的情况下扩展div1

Answer 1

你需要使用javascript来完成这项工作。您将无法使用CSS解决此问题。你可以做的是给两个'列'高度100％，但我不认为这是你想要的。

Answer 2

如果你想引入一些CSS3（并非所有浏览器都支持），你可以在这里找到一些东西：http://www.css3.info/preview/multi-column-layout/

Answer 3

我认为div不可能。表解决了这个问题。当div1扩展时，也不可能扩展div2！使用一些javascript将解决问题

Answer 4

使用CSS 2.1的方法是使用display table：

#content-wrap {
    display: table-row;
}
#content-wrap div {
    display: table-cell;
}

大多数人不使用它的原因是它在IE6和IE中不起作用。 7，你还需要一个额外的包装元素来display: table声明一切正常工作。

CSS3的另一种方法是使用flexboxes：

#content-wrap {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}
#content-wrap div {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

- 编辑

现在我已经老了，更聪明了，你实际上只需要display: table方法：

#content-wrap {
    display: table;
}
#content-wrap div {
    display: table-cell;
}

它应该与您当前的标记一起使用，布局引擎会插入anonymous table object来扮演table-row角色。

另请注意，最近弹性框草稿发生了显着变化，但浏览器仍处于旧草案中。

Answer 5

这值得一试：

#content-wrap { position: relative; }
#div2 { position: absolute; top: 0; bottom: 0; }

我不认为这种技术在IE6中有效，并且似乎并不适用于所有情况，但我在一周前偶然发现了它。基本上，你告诉元素的顶部和底部是最大的，所以它伸展。请注意，这只会在没有固定高度的情况下起作用。

Div框在溢出时不会扩展

5 个答案: