Split.js 四个可移动方格

原创已于 2025-06-27 14:12:17 修改 · 666 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-24 16:04:22 首次发布

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Split.js Four Panes Demo</title>
<script src="https://unpkg.com/split.js/dist/split.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, sans-serif;
}

.split-container {
display: flex;
height: 100vh;
width: 100%;
}

.pane {
overflow: auto;
position: relative;
}

.pane-content {
padding: 15px;
height: 100%;
box-sizing: border-box;
}

.gutter {
background-color: #eee;
background-repeat: no-repeat;
background-position: 50%;
}

.gutter.gutter-horizontal {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
cursor: col-resize;
}

.gutter.gutter-vertical {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
cursor: row-resize;
}

.pane-1 { background-color: #f0f8ff; }
.pane-2 { background-color: #fff0f5; }
.pane-3 { background-color: #f0fff0; }
.pane-4 { background-color: #fff8dc; }
</style>
</head>
<body>
<div class="split-container">
<div id="left-pane" class="pane pane-1">
<div class="pane-content">
<h2>Pane 1</h2>
<p>This is the first pane. You can drag the gutters to resize the panes.</p>


</div>
</div>
<div id="right-panes" class="split-vertical">
<div id="top-right-pane" class="pane pane-2">
<div class="pane-content">
<h2>Pane 2</h2>
<p>This is the second pane. Resize horizontally or vertically.</p>
</div>
</div>
<div id="bottom-right-panes" class="split-horizontal">
<div id="bottom-left-pane" class="pane pane-3">
<div class="pane-content">
<h2>Pane 3</h2>
<p>This is the third pane. All panes are resizable.</p>
</div>
</div>
<div id="bottom-right-pane" class="pane pane-4">
<div class="pane-content">
<h2>Pane 4</h2>
<p>This is the fourth pane. Enjoy the flexibility!</p>
</div>
</div>
</div>
</div>
</div>