Les utilisateurs peuvent ajuster la largeur des divs côte à côte en les faisant glisser

Question

J'ai deux divs côte à côte. S'il existe une solution simple, autorisez l'utilisateur à redimensionner la largeur des deux div en les faisant glisser.

Si la largeur d’un div augmente, la largeur de l’autre div diminue, gardant la somme des largeurs des deux div inchangée.

Ce serait formidable s'il pouvait être implémenté en utilisant du javascript pur ou du CSS. N'hésitez pas à ajouter d'autres éléments comme des divs.

Les codes des deux divs sont les suivants :

.left {
    flotteur : gauche ;
    largeur : 49 % ;
    hauteur minimale : 50 px ;
    bordure : 2px en pointillés #f0f
}

.droite {
    Flotter à droite;
    largeur : 49 % ;
    hauteur minimale : 50 px ;
    bordure : 2px en pointillés #00f
}</pré>
<pre class="brush:php;toolbar:false;"><div class="right"></div>
<div class="gauche"></div>

Merci pour vos idées !

Answer 1

Par curiosité, j'ai créé une petite expérience et j'ai découvert qu'il était beaucoup plus facile à mettre en œuvre en utilisant un élément conteneur flexbox principal .wrapper 来包含 .left 和 .right et en laissant le mécanisme flexbox faire le gros du travail.

Deux choses :

• Lors de l'utilisation de resize 时，属性 overflow 需要设置为 auto pour rendre les poignées visibles (testé sur Windows Firefox et Chrome/Edge).
• Lors de la sélection d'un élément enfant redimensionnable et doté d'une poignée, que j'ai sélectionnée .left。因为它们是弹性盒子的子元素，所以在另一个元素上使用 flex: 1（.right), le mécanisme flexbox fera en sorte que l'élément suive la taille de l'élément redimensionné et remplisse tout espace restant.

Référence MDN : redimensionner

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