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%;
    }
}

Principe

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.

Redimensionnement de l'attribut de mise à l'échelle libre CSS3

La syntaxe et les paramètres de l'attribut resize

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.

• aucun : L'utilisateur ne peut pas faire glisser l'élément pour modifier la taille.
• les deux : l'utilisateur peut faire glisser l'élément et modifier la hauteur et la largeur de l'élément en même temps
  
• horizontal : l'utilisateur peut faire glisser l'élément et modifier uniquement la largeur de l'élément, mais ne peut pas modifier l'élément haut.
  
• vertical : L'utilisateur peut faire glisser l'élément et peut uniquement modifier la hauteur de l'élément, mais ne peut pas modifier la largeur de l'élément.
  
• hériter : hériter de la valeur de l'attribut de redimensionnement de l'élément parent
  

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!