So erreichen Sie die Anpassung der Spaltenbreitenstreckung mit reinem CSS

Verwandte Empfehlungen: „CSS-Video-Tutorial“

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

Prinzip

Nutzen Sie die Nicht-overflow:auto-Elemente des Browsers, um die dehnbare Funktion von resize festzulegen und so eine JavaScript-freie Steuerung der Spaltenbreite zu erreichen.

Die Bildlaufleiste unter dem Webkit-Browser kann angepasst werden. Die Größe des Größenänderungsbereichs entspricht der Größe der Bildlaufleiste. Daher können wir den gesamten Dehnungsbereich so hoch wie den Container gestalten.

CSS3 Free Scaling Attribute Resize

Die Syntax und Parameter des Resize-Attributs

Das Resize-Attribut wird hauptsächlich zum Ändern der Größe von Elementen verwendet und dient hauptsächlich dazu Verbessern Sie das Benutzererlebnis.

resize: none | both | horizontal | vertical | inherit

Die durch das Größenänderungsattribut in CSS3 angegebenen Werte sind in die folgenden Typen unterteilt.

• keine: Der Benutzer kann das Element nicht ziehen, um die Größe zu ändern.
• beides: Der Benutzer kann das Element ziehen und gleichzeitig die Höhe und Breite des Elements ändern.
  
• horizontal: Der Benutzer kann das Element ziehen und nur die Breite ändern das Element, kann die Elementhöhe jedoch nicht ändern.
  
• vertikal: Der Benutzer kann das Element ziehen und nur die Höhe des Elements ändern, nicht jedoch die Breite des Elements.
  
• erben: erbt den Größenänderungsattributwert des übergeordneten Elements
  

Das obige ist der detaillierte Inhalt vonSo erreichen Sie die Anpassung der Spaltenbreitenstreckung mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!