html - 使用 DIV/css 复制可变宽度 TABLE 列行为

Question

我花了 4 个小时的大部分时间来处理必须简单的事情:用 DIV 复制旧 HTML 表格列的行为。

此布局位于更高级别的 DIV 中。

我在 DIV 中有一个简单的三列布局:

• 第 1 列有文字。我希望它在不破坏文本的情况下尽可能窄(即，与最长的单词一样宽)。
• 第 2 列是固定宽度的。
• 第 3 列占据所有剩余空间，并在右上角包含一个按钮。

有了表格，布局就很简单了:

<table><tr>
  <td width=1%>Foo&nbsp;Bar Baz</td>
  <td width=150px><img src="foo.jpg"></td>
  <td width=100%><div style="float:right">Button</div>Other stuff. </td>
</tr></table>

这在除 Firefox 之外的所有浏览器中都能正常工作，Firefox 不喜欢包含 DIV 中的表格。

使用 DIV 和 css，我就是无法正常工作。具体来说: - 我无法弄清楚要使用什么 CSS 来打破第一列的宽度，因此 Foo Bar 位于第一行，而 Baz 软换行。 - 我不知道如何扩展第三列以占用前两列之后的剩余空间。

我尝试了多种 width:auto、float:left、word-wrap 设置的组合，以及我可以在这里和网上其他地方找到的任何其他答案。我是否遗漏了一些明显的东西？

Answer 1

这应该有效。我在我的代码中添加了一些颜色。

<style>
#parent {overflow: hidden; background: #eee}
#a, #b {float: left;}

#a {background: #000; width: 1%;}
#b {background: #666; width: 150px;}
#c {background: #fc0; overflow: hidden}

button {float: right;}
</style>

<div id="parent">
    <div id="a">
        <p>Lorem <br>ipsum<br>dolor<br>sit<br>amet</p>
    </div>
    <div id="b">
        <p>Lorem <br>ipsum<br>dolor<br>sit<br>amet</p>
    </div>
    <div id="c">
        <button>button</button>
        Lorem ipsum
    </div>
</div>

http://jsfiddle.net/9X7gy/2/