如何设置浮动div的宽度以占用剩余空间而不会推动其他div？

Question

对于我想要制作的布局的一部分，我想使用三个div，它们彼此相邻。左边和右边有一个最大宽度设置，工作正常，但我希望中间div扩展其宽度以填充剩余空间。为了澄清，左和右div可以具有从0px到最大宽度的任何宽度，具体取决于每个中的内容，并且我希望中间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尽可能地完成

谢谢！

Answer 1

Classic Floats

如果您订购：

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

并向左浮动左列，向右浮动右列，中间列应填充剩余空间。但是你会遇到边距，边框和填充的问题。

---

Flexbox的

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

你将需要能够选择父元素，因此为了本演示的目的，代码将被<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>可见。对于实际内容，列将自动调整。

Answer 2

我不想在这里挖掘一个旧线程，但我一直在寻找解决我自己问题的方法并遇到这个问题，我想我最好与弗朗西斯科分享...

表是定位布局的一个糟糕的想法，主要问题是在表格在浏览器中显示/渲染之前，它必须呈现它的</table>标记。

你能想象如果Facebook的列内容使用了一个表格进行布局，那么在检查你的时间线时，它需要花费很长时间才能在屏幕上呈现任何内容！ 另一个问题是表格在每个浏览器中的表现都非常不同。

基本上：<table>用于布局= NO！，<table>用于列出数据行或信息= YES！