Benutzer können die Breite nebeneinander liegender Divs anpassen, indem sie sie ziehen

Question

Ich habe zwei Divs nebeneinander. Wenn es eine einfache Lösung gibt, erlauben Sie dem Benutzer, die Breite beider Divs durch Ziehen zu ändern.

Wenn die Breite eines Divs zunimmt, verringert sich die Breite des anderen Divs, wobei die Summe der Breiten der beiden Divs unverändert bleibt.

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.

Die Codes für die beiden Divs lauten wie folgt:

.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
}

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

Vielen Dank für alle Ideen!

Answer 1

出于好奇，我创建了一个小试验，并发现使用一个主要的弹性盒容器 .wrapper 来包含 .left 和 .right 元素，并让 弹性盒机制 完成艰巨的工作更容易实现。

两件事：

• 当使用 resize 时，属性 overflow 需要设置为 auto 以使 手柄 可见（在 Windows Firefox 和 Chrome/Edge 上测试通过）。
• 选择一个可以调整大小并拥有 手柄 的子元素，我选择了 .left。因为它们是弹性盒子的子元素，所以在另一个元素上使用 flex: 1（.right）时，弹性盒机制 将使该元素跟随调整大小的元素的大小，并填充任何剩余空间。

MDN 参考：resize

/* 用于轻松调整 .right 大小的弹性盒容器 */
.wrapper { display: flex }

.left, .right {
    /* 初始大小，浏览器将记住上次状态直到页面重新加载 */
    width: 50%;
    min-height: 50px; /* 至少要有一些内容显示 */
    min-width : 50px;
}

.left {
    overflow: auto; /* 必须使手柄可见 */
    resize: both;   /* 启用双向调整大小 */
           /* 在单个方向上使用 horizontal/vertical */
}

.right {
    flex: 1; /* 将填充剩余的水平/垂直空间 */
}

/* 美化 */
.left  { border: 2px dashed #f0f }
.right { border: 2px dashed #00f }

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