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/