Maison > Article > interface Web > Comment obtenir un ajustement de l'étirement de la largeur des colonnes avec du CSS pur
Recommandations associées : "Tutoriel vidéo CSS"
Html :
<p class="column"> <p class="column-left"> <p class="resize-bar"></p> <p class="resize-line"></p> <p class="resize-save"> 左侧的内容 </p> </p> <p class="column-right"> 右侧的内容 </p> </p
css
.column { overflow: hidden; } .column-left { height: 400px; background-color: #fff; position: relative; float: left; } .column-right { height: 400px; padding: 16px; background-color: #eee; box-sizing: border-box; overflow: hidden; } .resize-save { position: absolute; top: 0; right: 5px; bottom: 0; left: 0; padding: 16px; overflow-x: hidden; } .resize-bar { width: 200px; height: inherit; resize: horizontal; cursor: ew-resize; opacity: 0; overflow: scroll; max-width: 500px;//设定最大拉伸长度 min-width: 200px;//设定最小宽度 } /* 拖拽线 */ .resize-line { position: absolute; right: 0; top: 0; bottom: 0; border-right: 2px solid #eee; border-left: 1px solid #bbb; pointer-events: none; } .resize-bar:hover ~ .resize-line, .resize-bar:active ~ .resize-line { border-left: 1px dashed skyblue; } .resize-bar::-webkit-scrollbar { width: 200px; height: inherit; } /* Firefox只有下面一小块区域可以拉伸 */ @supports (-moz-user-select: none) { .resize-bar:hover ~ .resize-line, .resize-bar:active ~ .resize-line { border-left: 1px solid #bbb; } .resize-bar:hover ~ .resize-line::after, .resize-bar:active ~ .resize-line::after { content: ''; position: absolute; width: 16px; height: 16px; bottom: 0; right: -8px; background: url(./resize.svg); background-size: 100% 100%; } }
Utilisez les éléments non overflow:auto
du navigateur pour définir la fonctionnalité extensible de resize
afin d'obtenir un contrôle de la largeur des colonnes sans JavaScript.
La barre de défilement sous le navigateur Webkit peut être personnalisée. La taille de la zone de redimensionnement est la taille de la barre de défilement. Par conséquent, nous pouvons rendre toute la zone d'étirement aussi haute que le conteneur.
L'attribut resize est principalement utilisé pour modifier la taille des éléments, et son objectif principal est de améliorer l’expérience utilisateur.
resize: none | both | horizontal | vertical | inherit
Les valeurs spécifiées par l'attribut resize en CSS3 sont divisées dans les types suivants.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!