Html 使用DIV/css复制可变宽度表列行为

我花了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来打破第一列的宽度，所以FooBar在第一行，Baz软包装。 -我想不出如何展开第三列以占用前两列之后的剩余空间

---

我尝试过多种宽度组合：自动、浮动、换行设置，以及我在这里和网上其他地方可以找到的任何其他答案。我是不是遗漏了一些明显的东西？

这应该是可行的。我在代码中添加了一些颜色

<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>

#父{溢出：隐藏；背景：#eee}
#a、 #b{float:left；}
#a{背景：000；宽度：1%；}
#b{背景：#666；宽度：150px；}
#c{背景：#fc0；溢出：隐藏}
按钮{float:right；}
洛雷姆
同侧
多洛
坐
阿米特

洛雷姆
同侧
多洛
坐
阿米特

按钮
乱数假文

---

谢谢您的尝试，但对我来说，最左边的div（a）显示为1%的宽度，没有扩展到适合最长的单词（Lorem）。啊，对不起，我不知道您想要这个。因此，只需将

宽度

从

#a

中删除即可。在我的帖子中更新了小提琴。谢谢！看起来神奇的组合是a上没有宽度，c上有溢出：隐藏。