三列可变宽度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;
}

这是小提琴: