css - 如何并排设置 3 个 div 以便中间 div 可以随着表单调整大小而拉伸

Question

我知道这可能看起来像一个老问题，但我试图将 3 个 div 并排放置，但中间 div 应该随着表单大小的调整而伸​​展。我在这里找到了这个并使用了他们的代码，但它不起作用。正确的 div 仍然被推到 div 下方，而不是在它旁边。

这是我所拥有的一个示例，但就像我说的那样，正确的 div 被推到 div 下方而不是在它旁边。有人可以分享他们获得的知识！

Answer 1

HTML：

<div class="mainDiv">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</div>

CSS：

.mainDiv{ position: relative;}
.left{ position: absolute; left: 0; top: 0; width: 100px; }
.right{ position: absolute; right: 0; top: 0; width: 100px; }
.center { margin: 0 100px; }

JSFiddle

根据您的新要求更新 Fiddle :)

Answer 2

<div style="border:1px solid red; height:140px;">
<div style="width:100px; float:left; border:1px solid blue;">
    left
</div>
<div style="width:100px;  float:right; border:1px solid blue; ">
    right
</div>
<div style="border:5px solid green; overflow:hidden;">
    middle
</div>

检查这个例子