css - 如何调整 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/