使用者可以拖曳操作來調整並排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>