css - CSS 列宽：“尽可能宽”和“剩下的”

Question

我有一个看起来像这样的网页：

<table>
    <tr>
        <td style=white-space:nowrap>
            lots of content...
        </td>
        <td>
            some more content
        </td>
    </tr>
</table>

这很好用。左列占用所需的宽度，右列占用尽可能多的宽度。右栏包含很多自动换行。

我想在纯 CSS 中执行此操作，因为从语义上讲，没有任何表格。但我尝试的一切要么需要硬编码宽度，要么将右列放在左列下方。有办法吗？

Answer 1

浮动左列，并使右列不浮动overflow:hidden。这将导致右列自动填充剩余宽度，而不会环绕左列下方。

JSFiddle 演示

.column1 {
    float: left;
}
.column2 {
    overflow: hidden;
}

这个技巧在除 IE6 之外的所有浏览器中都测试得很好（此时应该无关紧要）。

Answer 2

您可以使用 CSSdisplay:table-cell规则来模拟表格布局。

<div style=white-space:nowrap>lots of content... lots of content... lots of content... lots of content... lots of content... lots of content... lots of content...</div>
<div>some more content</div>

div {
    display:table-cell;
    vertical-align:middle;
}

jsFiddle 示例