Question

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

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

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

所有三列都有固定高度：准确地说是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/

Answer 2

这也可以通过嵌套div概念来实现。您需要做的就是将div所需的div部分划分为3列，如下所示

<div id="main">
    <div id="column-1"></div>
    <div id="column-2">
        <div id="column-2-1"></div>
        <div id="column-2-2"></div>
    </div>
</div>

请通过How to create 3 column layout using css div了解详情。

Answer 3

<div style="float:left; width:33%">Column1</div>
<div style="float:left; width:33%">Column2</div>
<div style="float:right; width:33%">Column3</div>

您可以根据需要调整宽度％。

Answer 4

您还需要输入“display：inline;” div通常以块形式显示。如果没有内联，它将显示为三行而不是三列。

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

4 个答案: