如何设置浮动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>

我认为这可以用一个三列,单行表来完成,但我绝对不希望使用表格-我想用纯CSS来实现尽可能多的.

谢谢!

Answer 1

经典花车

如果您订购:

<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>s可见.使用实际内容,列将自动调整.