三列可變寬度CSS頁面布局，中間列擴展

Question

有很多CSS列布局信息，但是似乎所有這些都至少依賴於某些具有固定寬度（或百分比）的列，然后其他列可以基於這些寬度。

我要完成的是三列布局，左列和右列的寬度可變（它們中可能有任何東西），但分別卡在左側和右側。 然后，中心列應擴展為占據它們之間的任何剩余空間。 即，如果右列中沒有任何內容，則中間列將擴展到屏幕的右側。

這是一家快速商店來演示：

Answer 1

如果您不介意將center元素放在左右列之后，則可以執行以下操作：

<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

只需浮動側面元素，中間的元素只需添加一個溢出即可（可以hidden或scroll ）。

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  overflow: hidden;
}

這是小提琴：

Answer 2

您可以使用表格來幫助您進行這種布局。 基本思想是將表寬度設置為100％（如果願意，可以設置為固定值），將一列寬度設置為100％，然后讓CSS確定其他單元格需要多少空間。 這是一個快速的JSFiddle：

CSS基本上是：

table {
    width: 100%;
}

td.b {
    /* Middle element that expands. */
    background-color: #efe8e1;
    width: 100%;
}

筆記：

• 很簡單！
• 如果最終在中間單元格中出現任何水平溢出，則無論您將溢出設置為什么，表都有增加表格寬度的怪異習慣。 使溢出滾動僅在中間列正確工作是完全痛苦和不可能的事情。 您可以嘗試將td位置：相對和位置：絕對div放在里面，但是如果我沒記錯的話，這在IE8的標准模式下不起作用。
• 在台式機上最新版本的Firefox / Safari / Chrome上進行了測試，模糊記憶表明此技巧的非滾動版本在IE7 +上可以正常使用。 現實可能會有所不同。 :)
• 如果您想使用“ ugh table”，也可以使用display：table，table-row和table-cell來實現。
• 此技巧也適用於垂直擴展！
• 這是一張桌子，因此各列將保持相同的高度。