Html 如何拉伸两个div元素以填充可用的水平空间？

我真的希望你能帮助我

我创造出来是为了展示我在做什么

我的问题是：如何拉伸两个div元素以填充可用的水平空间

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

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

其他两个div元素的宽度应该填满剩余的可用空间，它们的宽度也应该相同->两个div的宽度各为50%

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

我尽量不使用桌子等

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

编辑：

---

恐怕我认为你做不到

浮动：左

从包含的div中删除代码，所有元素都彼此相邻，一旦元素从屏幕右侧离开，它就会在下面缠绕，留下一个空间（有点像相对定位）

此外，您还试图将固定宽度与可变宽度进行比较，这几乎是不可能的

如果你看看这里：

首先，我把你的代码缩减到2个div，并让它正常工作

我在backgroundG类中添加了

overflow:hidden

，以确保有一个灰色背景，并将两个div向左浮动

然后我设置了宽度，如果你给每个元素添加了一个边框，那么累积的总宽度必须在100%左右

然后我在一个新的backgroundG元素中添加了另外3个元素，并为fillup元素创建了一个separte类，因此它将是80%（没有边框）

可能对你帮助不大。对不起，如果没有

---

干杯

您可以在javascript的帮助下完成。更改div标记如下：

第2节

第4节

并将此javascript添加到这些标记之后：

    var elem1 = document.getElementById("part1");
    elem1.style.width = (screen.width - 150)/2;
    var elem2 = document.getElementById("part2");
    elem2.style.width = (screen.width - 150)/2;

---

去除

宽度：50%解决此问题的一种方法是将div视为表中的单元格。表格的一个独特特性是，无论您给单元格的宽度是多少，单元格都将填充表格的宽度。通过给一些单元格一个宽度，其他单元格将填充剩余的空间。通过使用
display:table
和
display:table cell
可以利用这一点，而无需更改html。看看这个例子：


我还没有测试过这个，但它应该可以在所有“当前”浏览器中使用。它应该在IE8+中工作，但在IE7中可能不工作，当然在IE6中也不会工作
 谢谢你的回答和你的提示：左；铃声响了。我现在就在上面，会让你知道它是否成功：-）这很聪明。但不幸的是，我正在寻找一个纯CSS解决方案。那太好了。我在上面发布了一个类似的解决方案。我不知道那个显示：表格单元格；自我膨胀。太棒了。最后一件事：如何设置溢出：隐藏；？div的文本应设置为44px的高度和宽度。有什么想法吗？考虑到您的需求，使用
display:table cell
是正确的选择，只要您不介意不支持IE6。可能在仅限IE6的样式表中提供一个替代方案。