如何并排设置3个div这样中间div可以用表单调整大小来拉伸

Question

我知道这可能看起来像一个老问题,但我试图并排放置3个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

根据您的新要求更新了小提琴 :)