Heim > Web-Frontend > CSS-Tutorial > So erreichen Sie die Anpassung der Spaltenbreitenstreckung mit reinem CSS

So erreichen Sie die Anpassung der Spaltenbreitenstreckung mit reinem CSS

藏色散人
Freigeben: 2020-07-25 16:07:18
nach vorne
3132 Leute haben es durchsucht

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
Nach dem Login kopieren

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: &#39;&#39;;
        position: absolute;
        width: 16px; height: 16px;
        bottom: 0; right: -8px;
        background: url(./resize.svg);
        background-size: 100% 100%;
    }
}
Nach dem Login kopieren

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
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage