Les utilisateurs peuvent ajuster la largeur des divs côte à côte en les faisant glisser
P粉690200856
2023-08-28 17:28:25
<p>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. </p>
<p>Si la largeur d’un div augmente, la largeur de l’autre div diminue, gardant la somme des largeurs des deux div inchangée. </p>
<p>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. </p>
<p>Les codes des deux divs sont les suivants : </p>
<pre class="brush:php;toolbar:false;">.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></pre>
<p>Merci pour vos idées ! </p>
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 :
resize
时,属性overflow
需要设置为auto
pour rendre les poignées visibles (testé sur Windows Firefox et Chrome/Edge)..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