三列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/

Answer 2

這也可以通過嵌套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>

請通過css div了解如何創建3列布局以了解更多相關信息。

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通常以塊形式顯示。 如果沒有內聯，它將顯示為三行而不是三列。