对于我想要制作的布局的一部分，我想使用三个 div，所有 div 都彼此相邻浮动。左侧和右侧有一个最大宽度设置，效果很好，但我希望中间的 div 扩大其宽度以填充剩余空间。澄清一下，左右 div 的宽度可以是从 0px 到最大宽度的任何位置，具体取决于每个 div 中的内容，并且我希望中间的 div 扩展其宽度，以便它占据其余的空间而不是由两侧的 div 使用。

它现在遇到的问题是，如果中间 div 中有很多内容，它会扩展并将右侧 div 推到下一行，而不是与其他两行保持一致。

这是我到目前为止所拥有的CSS：

#left-column {
 width: auto;
 max-width: 200px;
 height: auto;
 float: left;
}

#middle-column {
 float: left;
 width: auto;
}

#right-column {
 width: auto;
 max-width: 200px;
 height: auto;
 float: right;
}

...以及 HTML：
<div id="left-column">...</div>
<div id="middle-column">...</div>
<div id="right-column">...</div>

我认为这可以使用三列单行表来完成，但我绝对这样做NOT想要使用表格 - 我想通过使用纯 css 来完成尽可能多的工作。

Thanks!

经典花车

如果您订购：

<div id="left-column"></div>
<div id="right-column"></div>
<div id="middle-column"></div>

然后将左列向左浮动，将右列向右浮动，中间列应填充剩余空间。不过，你会遇到一些关于边距、边框和填充的问题。

Flexbox

如果不需要支持旧版浏览器，可以使用flexbox。使用 Flexbox，这种结构变得更加简单，并且标记不需要更改。

You will需要能够选择父元素，因此为了本演示的目的，代码将被包装为<div class="wrapper">.

.wrapper {
  display: flex;
  flex-direction: row;
  height: 200px;
}

.left {
  background-color: red;
  width: 100px;
}
.middle {
  background-color: green;
  flex: 1;
}
.right {
  background-color: blue;
  width: 100px;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

显式添加高度和宽度，以便<div>是可见的。根据实际内容，列会自动调整。