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

Question

我有两个并排的div。如果有任何简单的解决方案，允许用户通过拖动来调整两个div的宽度。

如果一个div的宽度增加，另一个div的宽度减少，并保持两个div宽度之和不变。

如果可以使用纯javascript或css实现，那就太好了。欢迎添加任何其他项目，比如div。

两个div的代码如下：

.left {
    float: left;
    width: 49%;
    min-height: 50px;
    border: 2px dashed #f0f
}

.right {
    float: right;
    width: 49%;
    min-height: 50px;
    border: 2px dashed #00f
}

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

感谢任何想法！

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>