Question

如果左边和右边有两个固定宽度的黑色容器，我怎么能在窗口调整大小时调整中间红色容器的大小？我知道我可以在jQuery计算窗口宽度中执行此操作并应用于中间<div>，但我想知道是否还有另一个js-less解决方案。 Plnkr link here

<div id="wrapper">
  <div class="pull-left black"></div>
  <div class="middle red"></div>
  <div class="pull-right black"></div>
</div>

Answer 1

Flexbox的？

JSFiddle Demo

#wrapper {
  max-width: 300px;
  height: 40px;
  display: flex;
}
.black {
  flex: 0 0 40px;
  background: #000;
}
.red {
  flex: 1;
  background: #f00;
}

<div id="wrapper">
  <div class="black"></div>
  <div class="red"></div>
  <div class="black"></div>
</div>

Answer 2

我会这样做：让我们说你的黑色容器是50px。

.black{
  width: 50px;
}

然后你的红色容器有些尺寸 - 2 * 50px。我不知道你想要的尺寸，但是对于这个例子，我们说你需要它是全窗宽。然后你会这样做：

.red{
  width: calc(100vw - 100px);
}

希望这有帮助。

调整中间容器的大小

2 个答案: