用户可以通过拖动操作来调整并排div的宽度

Question

我有两个并排的div。如果有任何简单的解决方案，允许用户通过拖动来调整两个div的宽度。如果一个div的宽度增加，另一个div的宽度减少，并保持两个div宽度之和不变。如果可以使用纯javascript或css实现，那就太好了。欢迎添加任何其他项目，比如div。两个div的代码如下：.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 }