3个div，1个固定宽度，1个可变宽度（文本集），1个扩展填充。可能？

Question

我要做的是左侧有一个固定的宽度div，旁边有一个div，宽度由文本内容设置，最后一个div填充剩余的宽度。

这是我到目前为止所做的：

<div style="width: 100%">
  <div style="border: 1px solid black; height: 2px; float: left; width: 100px; ">
  </div>
  <div style="float: left; position: relative; top: -10px; padding-left: 5px; padding-right: 5px;">
    Text
  </div>
  <div style="border: 1px solid black; height: 2px; float: left; ">
  </div>
</div>

此处示例：http://jsfiddle.net/Xjxeu/

我需要这个例子，但第三个div伸展到右边。

这可能没有任何重大的“黑客”吗？

Answer 1

您可以使用display: table;

人们有时可能不同意它是否是一个黑客，并且一般都看不起桌子，但它实际上很好。您没有使用表格，tds或其他任何内容，只是将div表示为table。

Demo here

这是实现这一目标的最佳，最可靠的方法。

IE7 and below don't support it.