三列DIV布局动态; left = fixed,center = fluid,right = fluid

Question

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

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

但那不是那么的.你看,我有三列; 其中两个需要避免明确调整大小.那么,第二个确实需要调整大小; 但不完全.

请允许我通过确定我一直试图满足的条件来澄清.

• 所有三个柱都具有固定高度:准确地说是65px.
• 第一列的宽度设置为285px.
• 中心列没有定义大小; 它只占用了剩余的空间.
• 右列将根据其中的内容确定其大小.没有明确设置大小,它只是根据内容调整大小,使中心列占用剩余的空间.
• 每列之上,下方和之间没有空格.

最终结果大致如下所示:

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

对于表格,我只是这样做:

<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之前),以确保当浏览器呈现中心列时,它知道如何围绕现有浮动正确呈现元素.

更新了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/