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软包装。 - 我无法弄清楚如何扩展第三列以获取前两列之后的剩余空间。

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

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/

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

1 个答案: