這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何使用純CSS實(shí)現(xiàn)分欄寬度拉伸調(diào)整，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

目前創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、南縣網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

Html：

<p class="column">
    <p class="column-left">
        <p class="resize-bar"></p>
        <p class="resize-line"></p>
        <p class="resize-save">
            左側(cè)的內(nèi)容
        </p>                                            
    </p>
    <p class="column-right">
        右側(cè)的內(nèi)容
    </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;//設(shè)定最大拉伸長度
    min-width: 200px;//設(shè)定最小寬度
}
/* 拖拽線 */
.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只有下面一小塊區(qū)域可以拉伸 */
@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%;
    }
}

原理

利用瀏覽器非overflow:auto元素設(shè)置resize可以拉伸的特性實(shí)現(xiàn)無JavaScript的分欄寬度控制。

webkit瀏覽器下滾動條可以自定義，其中resize區(qū)域大小就是scrollbar的大小，于是，我們可以將整個拉伸區(qū)域變成和容器一樣高。

css3自由縮放屬性resize

resize屬性的語法及參數(shù)

resize屬性主要是用來改變元素尺寸大小的，其主要目的是增強(qiáng)用戶體驗(yàn)。

resize: none | both | horizontal | vertical | inherit

在css3中 resize 屬性指定的值分為以下幾種。

• none：用戶不能拖動元素修改尺寸大小。
• both：用戶可以拖動元素，同時修改元素的高度和寬度
  
• horizontal：用戶可以拖動元素，僅可以改變元素的寬度，但不能修改元素的高度。
  
• vertical：用戶可以拖動元素，僅可以改變元素的高度，不能修改元素的寬度。
  
• inherit：繼承父元素的resize屬性值
  

上述就是小編為大家分享的如何使用純CSS實(shí)現(xiàn)分欄寬度拉伸調(diào)整了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：如何使用純CSS實(shí)現(xiàn)分欄寬度拉伸調(diào)整
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article46/joiphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)站建設(shè)、定制網(wǎng)站、ChatGPT、網(wǎng)站改版、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)