html - 如何拉伸(stretch)两个 div 元素以填充可用的水平空间？

Question

我真的希望你能帮助我。

我创建了 this fiddle展示我正在尝试做的事情。

我的问题是:如何拉伸(stretch)两个 div 元素以填充可用的水平空间？

如您所见，有 5 个 div 元素串在一起，由一个 div 元素包裹，我将背景颜色和宽度设置为 100%。

共有三个宽度为 50px 的 div 元素。

另外两个 div 元素的宽度应该填满剩余的可用空间，它们也应该具有相同的宽度 -> 两个 div 中的每一个的宽度都是 50%。

我的问题是这两个 div 元素的 50% 总宽度为 100%。而不是可用的空间宽度。

我尽量不使用表格等

如果有什么不清楚的地方，请告诉我。

编辑: I'd like to hear your comments about this way.

Answer 1

解决此问题的一种方法是将您的 div 视为表格的单元格。表格的一个独特属性是，无论您给它们设置什么宽度，单元格都会填满表格的宽度。通过给一些单元格一个宽度，其他单元格将填充剩余的空间。通过使用 display:table 和 display:table-cell，您可以在不更改 html 的情况下利用它。看看这个例子:

http://jsfiddle.net/GyxWm/

我没有对此进行测试，但它应该适用于所有“当前”浏览器。它应该在 IE8+ 中工作，但可能在 IE7 中不起作用，当然也不会在 IE6 中工作。