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, nimmt die Breite des anderen Divs ab, sodass 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 der beiden Divs lauten wie folgt: .left{float:left;width:49%;min-height:50px;border:2pxdashe

P粉020085599 · Answer

出于好奇，我创建了一个小试验，并发现使用一个主要的弹性盒容器 .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 }