如何调整调整2个并排元素的宽度以适合容器

Question

我在另一个div中有2个div。两个内部div正在显示由我的应用程序生成的文本。文本的长度各不相同。有没有办法强制一个内部div，让我们说第一个，用第二个内部div填充剩余的空间？

如果这听起来很神秘，请看下面的例子......得分箱的宽度根据显示的内容而变化.0％为短，100％为长...

如何确保左侧的按钮填满剩余的空间，使物品紧贴蓝色框。

Answer 1

我知道使用可变宽度执行此操作的最简单方法是使用虚假表：

<div id="stuff">
 <div id="name">Jesse James</div>
 <div id="percent">100%</div>
</div>


#stuff { display: table; width: 200px; }
#stuff #name { display: table-cell; width: 100%; background: gray; }
#stuff #percent { display: table-cell; background: red; }

http://jsfiddle.net/chovy/HMnSq/