css - 三列 DIV 布局动态；左 = 固定，中 = 流动，右 = 流动

Question

目前我找到的最佳解决方案是:

http://jsfiddle.net/kizu/UUzE9/

但事实并非如此。你看，我有三列；其中两个需要避免明确调整大小。好吧，第二个确实需要调整大小；但不完全是。

请允许我通过建立我一直试图满足的条件来澄清一下。

• 所有三列的高度都是固定的:准确地说是 65 像素。
• 第一列的宽度设置为 285 像素。
• 中心列没有定义大小；它只会占用剩余的空间。
• 右侧的列将根据其中的内容自行调整大小。没有明确设置大小，它只是根据内容调整大小，让中心列占据剩余的空间。
• 每列的上方、下方和之间没有空格。

最终结果大概是这样的:

   Logo     |            Player          |    Name     -----------------------------------------------------

For tables, I'd have simply done this:

<table width="100%" height="65px" cellspacing=0 cellpadding=0>
    <tr>
        <td width="285px" height="65px">
            Logo
        </td>
        <td height="65px">
            Player
        </td>
        <td width="1px" height="65px">
            Account
        </td>
    </tr>
</table>

上表代码结果:http://jsfiddle.net/zMNYb/

但我正试图摆脱使用表格和使用基于 DIV 的布局。有什么想法吗？

Answer 1

您可以通过对第一列使用 float:left，对最后一列使用 float:right 并将中间列设为 float:none

更新的演示:http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

---

注意:有必要在 HTML 中将右栏放在中心栏之前(见上文，col3 在 HTML 中位于 col2 之前)以确保当浏览器呈现中心栏时，它知道如何在现有 float 元素周围正确呈现。

---

更新的 CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

更新演示:http://jsfiddle.net/ew65G/1/