html - 三列可变宽度 CSS 页面布局，中心列展开

Question

有大量的 CSS 列布局信息，但它们似乎都依赖于至少一些具有固定宽度（或百分比）的列，然后其他列可以以此为基础。

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

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

三列示例

score 5 · Accepted Answer

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

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

只需浮动侧面元素，中间的元素只需添加一个溢出（可以是hiddenor scroll）。

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  overflow: hidden;
}

这是小提琴：

score 1 · Accepted Answer

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

CSS基本上是：

table {
    width: 100%;
}

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

笔记：

很简单！
如果您最终在中间单元格中出现任何水平溢出，则无论您将溢出设置为什么，表格都有增加表格宽度的奇怪习惯。让溢出滚动仅在中间列上正常工作是在完全痛苦和不可能之间的某个地方。您可以尝试制作 td position: relative 并在里面有 position: absolute div，但如果我没记错的话，这在标准模式下的 IE8 中不起作用。
在桌面上最新版本的 Firefox/Safari/Chrome 上进行了测试，模糊记忆表明该技巧的非滚动版本在 IE7+ 上运行良好。现实可能会有所不同。:)
如果您正在考虑“呃表格”，您也可以使用 display: table、table-row 和 table-cell 来完成此操作。
这个技巧也适用于垂直扩展！
这是一张桌子，所以列将保持相同的高度。

2 回答 2