Les utilisateurs peuvent ajuster la largeur des divs côte à côte en les faisant glisser
P粉690200856
P粉690200856 2023-08-28 17:28:25
0
1
424
<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>
P粉690200856
P粉690200856

répondre à tous(1)
P粉020085599

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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal