Question

我真的希望你能帮助我。

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

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

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

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

其他两个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中工作。

Answer 2

你可以借助javascript来做到这一点。像这样改变div标签：
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>

并在这些标签之后添加此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;

从css

中的sectionFillUp中删除width:50%;

Answer 3

害怕我不认为你可以。

float:left;从包含的div中删除你的代码，并且所有元素最终彼此相邻，一旦元素离开屏幕右边，它就会在下面留下一个空格（有点像相对定位））。

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

如果你看看这里：http://jsfiddle.net/P5Kjh/5/

首先，我将代码缩减为2个div并使其正常工作。

我已将overflow:hidden添加到backgroundG类，以确保存在灰色背景并向左浮动两个div。

然后我设置宽度，累计总数必须在100％左右，如果你为每个元素添加一个边框，你需要工作到一个较小的百分比。

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

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

干杯

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

3 个答案: