如何拉伸两个div元素以填充可用的水平空间？ [英] How do I stretch two div-elements to fill available horizontal space?
问题描述
我真的希望你能帮助我。
I really hope that you can help me.
我创建了这个小提琴来显示我想做什么。
I created this fiddle to show what I'm trying to do.
我的问题是：如何拉伸两个div元素以填充可用的水平空间？
My question is: How do I stretch two div-elements to fill available horizontal space?
正如你所看到的，有5个div元素串在一起，由一个div元素包围，其中我设置的背景颜色和宽度为100％。
As you can see there are 5 div-elements strung together, wrapped by a div-element where I set the background-color and width with 100%.
有三个宽度为50像素的div元素。
There are three div-elements with a width of 50px.
其他两个div元素的宽度应该填满剩余可用空间，它们应该具有相同的宽度 - >两个div中的每个的大于50％。
The width of the other two div-elements should fill up to the rest availiable space, they should have the same width, too ->50% for each of both divs.
我的问题是这两个div元素的50％是100％的总宽。
My problem is that the 50% for those both div-elements amount to a 100% total-width. And not to a availiable space width.
我试图不使用表格等。
编辑：
I'
I'd like to hear your comments about this way.
推荐答案
解决这个问题的一种方法是对待你的div表的单元格。表的唯一属性是，单元格将填充表的宽度，无论你给他们的宽度。通过给予一些单元格宽度，其他单元格将填充剩余的空间。通过使用 display：table 和 display：table-cell ，您可以利用这个而不改变您的html。请查看此示例：
One way to solve this is to treat your divs like the cells of a table. A unique property of tables is that the cells will fill the width of the table no matter what widths you give them. By giving some cells a width the other cells will fill the remaining space. By using display:table and display:table-cell you can take advantage of this without changing your html. Have a look at this example:
我没有测试，但它应该在所有当前浏览器中工作。它应该工作在IE8 +，但可能不工作在IE7，肯定不会在IE6工作。
I've not tested this but it should work in all "current" browsers. It should work in IE8+ but probably doesn't work in IE7 and certainly won't work in IE6.
这篇关于如何拉伸两个div元素以填充可用的水平空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
