三列可变宽度CSS页面布局，中心列扩展

Question

有很多CSS列布局信息，但它们似乎都依赖于至少一些具有固定宽度（或百分比）的列，其他列可以基于这些列。

我想要完成的是一个三列布局，左右列是可变宽度（它们可以包含任何内容）但分别粘在左右两侧。然后中心列应该展开以占据它们之间的任何剩余空间。即如果右列中没有任何内容，则中间列将扩展到屏幕右侧。

这是一个快速商店来展示：

Answer 1

如果您不介意将中间元素放在左右列之后，您可以执行以下操作：

<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

你可以（ab）使用表来帮助你摆脱这种布局。基本思想是将表格宽度设置为100％（如果您愿意，则设置为固定值），将一个宽度设置为100％，并让CSS确定其他单元格需要多少空间。这是一个快速的JSFiddle：

CSS基本上是：

table {
    width: 100%;
}

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

注意：

• 很简单！
• 如果你最终在中间单元格中出现任何水平溢出，那么表格就有这种奇怪的习惯，即无论你设置溢出的是什么，都要增加表格的宽度。让溢出滚动到恰当地与中间列一起工作是介于完全痛苦和不可能之间。您可以尝试制作td位置：relative并且位置：绝对div里面，但如果我没记错，这在标准模式下的IE8中不起作用。
• 在桌面上测试了最新版本的Firefox / Safari / Chrome，模糊内存表明此技巧的非滚动版本在IE7 +上运行正常。现实可能会有所不同。 ：）
• 如果您正在考虑“ugh tables”，您可以使用display：table，table-row和table-cell来完成此任务。
• 这个技巧也适用于垂直扩展！
• 这是一张桌子，因此列将保持相同的高度。