<p>我有两个并排的div。如果有任何简单的解决方案，允许用户通过拖动来调整两个div的宽度。</p> <p>如果一个div的宽度增加，另一个div的宽度减少，并保持两个div宽度之和不变。</p> <p>如果可以使用纯javascript或css实现，那就太好了。欢迎添加任何其他项目，比如div。</p> <p>两个div的代码如下：</p> <pre class="brush:php;toolbar:false;">.left { float: left; width: 49%; min-height: 50px; border: 2px dashed #f0f } .right { float: right; width: 49%; min-height: 50px; border: 2px dashed #00f }</pre> <pre class="brush:php;toolbar:false;">&lt;div class=&quot;right&quot;&gt;&lt;/div&gt; &lt;div class=&quot;left&quot;&gt;&lt;/div&gt;</pre> <p>感谢任何想法！</p>

/* 用于轻松调整 .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>