HTML CSS 分割功能实现问题咨询 附现有HTML代码片段

基础代码结构修正 #

你当前给出的HTML骨架不完整，先补全基础可运行的标准结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分割功能实现</title>
    <style>
        /* 以下是不同分割场景的CSS代码 */
    </style>
</head>
<body>
    <!-- 页面内容区域 -->
</body>
</html>

常见分割功能实现方案 #

1. 静态水平/垂直分割线 #

用于拆分不同板块内容，是最基础的内容分隔场景：

/* 水平分割线样式 */
.hr-divider {
    width: 100%;
    height: 1px;
    background-color: #e5e7eb;
    margin: 16px 0;
}

/* 垂直分割线样式 */
.vr-divider {
    width: 1px;
    height: 100%;
    background-color: #e5e7eb;
    margin: 0 16px;
}

使用示例：

<!-- 水平分割线使用 -->
<div>上方内容</div>
<div class="hr-divider"></div>
<div>下方内容</div>

<!-- 垂直分割线使用 -->
<div style="display: flex; height: 200px;">
    <div>左侧内容</div>
    <div class="vr-divider"></div>
    <div>右侧内容</div>
</div>

2. 固定比例分栏分割 #

如果需要把页面/容器拆分成固定比例的多个区块，直接用flex实现即可：

/* flex实现两栏分割，默认比例1:1 */
.two-col-split {
    display: flex;
    width: 100%;
    height: 400px;
}
.two-col-split .left {
    flex: 1;
    background-color: #f3f4f6;
}
.two-col-split .right {
    flex: 1;
    background-color: #e5e7eb;
}

调整两侧占比直接修改flex属性值即可，比如左栏flex:1、右栏flex:2就是1:2的占比。

3. 可拖拽调整的分割栏 #

如果需要支持用户手动拖拽调整两侧占比，配合少量JS即可实现：

.resize-split-container {
    display: flex;
    width: 100%;
    height: 400px;
}
.resize-split-container .left-panel {
    width: 50%;
    min-width: 200px;
    background-color: #f3f4f6;
}
.resize-split-container .divider {
    width: 4px;
    background-color: #9ca3af;
    cursor: col-resize;
}
.resize-split-container .right-panel {
    flex: 1;
    background-color: #e5e7eb;
}

拖拽逻辑代码：

const divider = document.querySelector('.divider')
const leftPanel = document.querySelector('.left-panel')
const container = document.querySelector('.resize-split-container')

divider.addEventListener('mousedown', (e) => {
    const startX = e.clientX
    const leftWidth = leftPanel.offsetWidth

    const onMouseMove = (e) => {
        const deltaX = e.clientX - startX
        const newLeftWidth = leftWidth + deltaX
        const containerWidth = container.offsetWidth
        // 限制最小宽度避免内容溢出
        if (newLeftWidth >= 200 && newLeftWidth <= containerWidth - 200) {
            leftPanel.style.width = `${newLeftWidth}px`
        }
    }

    const onMouseUp = () => {
        document.removeEventListener('mousemove', onMouseMove)
        document.removeEventListener('mouseup', onMouseUp)
    }

    document.addEventListener('mousemove', onMouseMove)
    document.addEventListener('mouseup', onMouseUp)
})

内容的提问来源于stack exchange，提问作者Jeanlqs