ユーザーは並べて配置した div をドラッグして幅を調整できます。

Question

2 つの div を並べて配置しています。簡単な解決策がある場合は、ユーザーがドラッグして両方の div の幅を変更できるようにします。

一方の div の幅が増加すると、もう一方の div の幅は減少し、2 つの div の幅の合計は変わりません。

純粋な JavaScript または CSS を使用して実装できれば素晴らしいと思います。 div などの他の項目は自由に追加してください。

2 つの div のコードは次のとおりです。

.left {
    フロート: 左;
    幅: 49%;
    最小高さ: 50px;
    境界線: 2 ピクセルの破線 #f0f
}

。右 {
    フロート: 右;
    幅: 49%;
    最小高さ: 50px;
    境界線: 2px 破線 #00f
}

<div class="right"></div>
<div class="left"></div>

アイデアをありがとうございます!

Answer 1

好奇心から、ちょっとした実験を作成したところ、メインのフレックスボックス コンテナ .wrapper を使用して .left 要素と .right 要素を含めて、 フレックスボックスメカニズムの大変な作業をより簡単に実装できます。

2 つのこと:

• resize を使用する場合、ハンドルを表示するには、プロパティ overflow を auto に設定する必要があります (Windows Firefox およびChrome/Edge 上記のテストは合格しました)。
サイズ変更可能で
• ハンドルを持つ子要素を選択します。私は .left を選択しました。これらはフレックスボックスの子であるため、別の要素で flex: 1(.right) を使用すると、フレックスボックス メカニズム により、その要素は次のサイズになります。サイズ変更された要素が表示され、残りのスペースが埋められます。

MDN リファレンス: サイズ変更

リーリー リーリー