三列可变宽度的CSS页面布局，中间列扩展 [英] Three-column variable width CSS page layout, centre column expands

问题描述

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

There is a plethora of CSS column layout information, but it all seems to rely on at least some of the columns having a fixed width (or percentage) which the others can then be based off.

我想实现的是一个三列布局，左边和右边的列是可变宽度的（它们可以有任何内容），但分别固定在左边和右边。然后中心列应该展开以占用它们之间的任何剩余空间。也就是说

What I'm trying to accomplish is a three-column layout, with the left and right columns being variable width (they could have anything in them) but being stuck to the left and right respectively. The centre column then should expand to take up any remaining space between them. I.e. if the right column has nothing in it, the centre column would then expand to the right of the screen.

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

Here's a quick shop to demonstrate:

推荐答案

如果你不介意把中心元素放在左右列之后，你可以这样做：

If you don't mind to put the center element after left and right columns you could do something like this:

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

只需要浮动边元素，对于中间的元素只需要添加一个溢出$ c> hidden 或滚动）。

Just float the side elements, and for the middle one just add an overflow (could be hidden or scroll).

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  overflow: hidden;
}

这里是小提琴：

这篇关于三列可变宽度的CSS页面布局，中间列扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！