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

我真的希望你能帮助我。如何拉伸两个div元素以填充可用的水平空间？

我创建了this fiddle来展示我想要做的事情。

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

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

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

其他两个div元素的宽度应该填充到其余可用空间中，它们应该具有相同的宽度 - 对于每个div，都应该有> 50％的宽度。

我的问题是这两个div元素的50％达到100％的总宽度。而不是一个可用的空间宽度。

我试图不使用表格等

让我知道如果有什么不清楚。

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

来源

2010-12-02 Teleport

只要您不介意不支持IE6，使用`display：table-cell`就是正确的选择。可能仅在IE6样式表中提供替代方法。 – RoToRa 2010-12-02 14:50:19

的一种方式把你的div看作桌子的单元格。表格的独特属性是单元格将填充表格的宽度，而不管你给它们的宽度是多少。通过给一些单元格宽度，其他单元格将填充剩余的空间。通过使用display:table和display:table-cell，你可以利用这一点而不需要改变你的html。看看这个例子：

http://jsfiddle.net/GyxWm/

我没有测试这一点，但它应该在所有的“当前”浏览器。它应该在IE8 +中工作，但在IE7中可能不起作用，并且肯定不会在IE6中工作。

来源

2010-12-02 14:44:00

太棒了。我上面发布了一个几乎类似的解决方案。我不知道显示：table-cell;自我扩张。辉煌。 – Teleport 2010-12-02 14:45:51

-2

怕我不认为你可以。

的float:left;去除内含div您的代码和所有元素下最终彼此，一旦元件离开屏幕的右侧，它包装下方留下的空间（有点像相对定位一样）。

此外，您正试图比较固定宽度和可变宽度，这几乎是不可能的。

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

首先我减少你的代码返回2周的div并得到了工作。

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

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

然后我在新的backgroundG元素中添加了其他3元素，并为fillup元素创建了separte类，因此它将是80％（不带边框）。

可能不会帮助你很多。对不起，不好意思

干杯

来源

2010-12-02 14:07:10

感谢您的回答，并感谢您使用float：left;钟声响了起来。我现在在上面，并会告诉你它是否成功:-) – Teleport 2010-12-02 14:11:29

-1

你可以用javascript的帮助。更改div标签是这样的：
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>

并添加这个JavaScript这些标签后somehwere：


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

而且从sectionFillUp在CSS删除width:50%;解决这个是

来源

2010-12-02 14:14:28 Caner

这很聪明。但不幸的是，我正在寻找一个纯粹的CSS解决方案。 – Teleport 2010-12-02 14:16:42

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

回答

相关问题