Pengguna boleh melaraskan lebar div sebelah menyebelah dengan menyeretnya

Question

Saya mempunyai dua div sebelah menyebelah. Jika terdapat sebarang penyelesaian mudah, benarkan pengguna mengubah saiz lebar kedua-dua div dengan menyeret.

Jika lebar satu div bertambah, lebar div lain berkurangan, mengekalkan jumlah lebar dua div tidak berubah.

Alangkah bagus jika ia boleh dilaksanakan menggunakan javascript atau css tulen. Jangan ragu untuk menambah item lain seperti div.

Kod untuk dua div adalah seperti berikut:

.left {
    terapung: kiri;
    lebar: 49%;
    ketinggian min: 50px;
    sempadan: 2px putus-putus #f0f
}

.betul {
    terapung: betul;
    lebar: 49%;
    ketinggian min: 50px;
    sempadan: 2px putus-putus #00f
}

<div class="kanan"></div>
<div class="kiri"></div>

Terima kasih atas sebarang idea!

Answer 1

Atas rasa ingin tahu, saya mencipta sedikit percubaan dan mendapati ia lebih mudah untuk dilaksanakan menggunakan elemen .wrapper 来包含 .left 和 .right bekas flexbox utama dan membiarkan mekanisme flexbox melakukan kerja keras.

Dua perkara:

• Apabila menggunakan resize 时，属性 overflow 需要设置为 auto untuk menjadikan pemegang kelihatan (diuji pada Windows Firefox dan Chrome/Edge).
• Apabila memilih elemen kanak-kanak yang boleh diubah saiz dan mempunyai pemegang, yang saya pilih .left。因为它们是弹性盒子的子元素，所以在另一个元素上使用 flex: 1（.right), mekanisme flexbox akan menjadikan elemen mengikut saiz elemen yang diubah saiz dan mengisi sebarang ruang yang tinggal.

Rujukan MDN: ubah saiz

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