如何将3个div并排放置，以便中间的div能够随表单调整而拉伸

Question

我知道这可能看起来像一个老问题，但我正在尝试将3个div并排放置，但中间的div应该随着表单调整大小而拉伸。我找到了这里并使用了他们的代码，但它不起作用。右侧的div仍然被推到div下面，而不是在旁边。 这里是我所拥有的示例，但就像我说的，右侧的div被推到div下面，而不是在旁边。 有人能分享他们的经验吗！

- Jnr

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 :)

（注：Fiddle指一款在线代码编辑器）

- Dipak

---

好的，既然这个功能有点可用了，我想进一步改进它。我希望右侧的 div 与中间的 div 对齐，无论中间 div 的长度如何。目前右侧的 div 被“钉”在浏览器窗口的右侧。你能帮忙吗？ - Jnr

右侧的div仍然“固定”在窗口的右侧（right:0; top:0;），请查看此链接以了解我想要实现的确切效果：http://www.hydrocell.co/test2.html。 - Jnr

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>

请查看这个例子

- user1206604

---

谢谢你的示例。如果我在你的右侧div中添加margin-right：，我确实得到了更接近的结果。我还在你的中间div中添加了min-width。当我缩小浏览器窗口时，如何防止div向下推（导致换行）？ - Jnr

好的，这里是最终结果的链接，以便您了解确切的想法。 - Jnr