Benutzer können die Breite nebeneinander liegender Divs anpassen, indem sie sie ziehen
P粉690200856
2023-08-28 17:28:25
<p>Ich habe zwei Divs nebeneinander. Wenn es eine einfache Lösung gibt, erlauben Sie dem Benutzer, die Breite beider Divs durch Ziehen zu ändern. </p>
<p>Wenn die Breite eines Divs zunimmt, verringert sich die Breite des anderen Divs, wobei die Summe der Breiten der beiden Divs unverändert bleibt. </p>
<p>Es wäre großartig, wenn es mit reinem Javascript oder CSS implementiert werden könnte. Fühlen Sie sich frei, weitere Elemente wie Divs hinzuzufügen. </p>
<p>Die Codes für die beiden Divs lauten wie folgt: </p>
<pre class="brush:php;toolbar:false;">.left {
schweben: links;
Breite: 49 %;
Mindesthöhe: 50 Pixel;
Rand: 2px gestrichelt #f0f
}
.Rechts {
schweben rechts;
Breite: 49 %;
Mindesthöhe: 50 Pixel;
Rand: 2px gestrichelt #00f
}</pre>
<pre class="brush:php;toolbar:false;"><div class="right"></div>
<div class="left"></div></pre>
<p>Vielen Dank für alle Ideen! </p>
出于好奇,我创建了一个小试验,并发现使用一个主要的弹性盒容器
.wrapper
来包含.left
和.right
元素,并让 弹性盒机制 完成艰巨的工作更容易实现。两件事:
resize
时,属性overflow
需要设置为auto
以使 手柄 可见(在 Windows Firefox 和 Chrome/Edge 上测试通过)。.left
。因为它们是弹性盒子的子元素,所以在另一个元素上使用flex: 1
(.right
)时,弹性盒机制 将使该元素跟随调整大小的元素的大小,并填充任何剩余空间。MDN 参考:resize