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>

この例を確認してください