split-pane.js

split-pane.jsというものを使ってます。
ペイン分割するためのライブラリです。
https://github.com/shagstrom/split-pane

ペイン3分割の方法が分からず詰まっています。
とりあえず、以下のようなコードでネスト構造にして3分割を行いましたが、これだと一番左側の線を動かすと、それにともなって真ん中と右を仕分けている線まで動いてしまいます。

なにか良い3分割方法がありましたら教えてください。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<meta http-equiv="X-UA-Compatible" content="IE=edge">
6		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7		<title>Nested</title>
8		<link rel="stylesheet" href="../split-pane.css">
9		<link rel="stylesheet" href="../pretty-split-pane.css" />
10		<script src="../jquery.js"></script>
11		<script src="../split-pane.js"></script>
12
13		<style>
14
15			html, body {
16				height: 100%;
17				min-height: 100%;
18				margin: 0;
19				padding: 0;
20			}
21
22			#top-component {
23				bottom: 20em;
24				margin-bottom: 5px;
25			}
26
27			#horizontal-divider {
28				bottom: 20em;
29				height: 5px;
30			}
31
32			#bottom-component {
33				height: 20em;
34			}
35
36			#left-component {
37				width: 10em;
38			}
39
40			#vertical-divider-1 {
41				left: 10em;
42				width: 5px;
43			}
44
45			#center-right-component{
46				left:10em;
47				margin-left:5px;
48			}
49
50			#center-component{
51				width:10em;
52			}
53
54			#vertical-divider-2{
55				left:10em;
56				width:5px;
57			}
58
59			#right-component{
60				left:10em;
61				margin-left:5px;
62			}
63
64			
65		</style>
66
67		<script>
68			$(function() {
69				$('div.split-pane').splitPane();
70			});
71		</script>
72	</head>
73	<body>
74		<div class="split-pane fixed-bottom">
75
76			<div class="split-pane-component" id="top-component">
77				<div class="pretty-split-pane-component-inner">
78				</div>
79			</div>
80
81			<div class="split-pane-divider" id="horizontal-divider"></div>
82
83			<div class="split-pane-component" id="bottom-component">
84				<div class="split-pane fixed-left">
85
86					<div class="split-pane-component" id="left-component">
87						<div class="pretty-split-pane-component-inner">
88						</div>
89					</div>
90
91					<div class="split-pane-divider" id="vertical-divider-1"></div>
92
93					<div class="split-pane-component" id="center-right-component">
94						<div class="split-pane fixed-left">
95
96							<div class="split-pane-component" id="center-component">
97								<div class="pretty-split-pane-component-inner">
98								</div>
99							</div>
100
101							<div class="split-pane-divider" id="vertical-divider-2"></div>
102
103							<div class="split-pane-component" id="right-component">
104								<div class="pretty-split-pane-component-inner">
105								</div>
106							</div>
107
108						</div>
109					</div>
110
111				</div>
112			</div>
113		</div>
114	</body>
115</html>
116

kei344

2016/11/21 05:06

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

行動規範の内容に同意します

回答1件

fixed-right の指定になっていないからでは？

HTML
1
2        <div class="split-pane fixed-bottom">
3
4            <div class="split-pane-component" id="top-component">
5                <div class="pretty-split-pane-component-inner">
6                </div>
7            </div>
8
9            <div class="split-pane-divider" id="horizontal-divider"></div>
10
11            <div class="split-pane-component" id="bottom-component">
12                <div class="split-pane fixed-left">
13
14                    <div class="split-pane-component" id="left-component">
15                        <div class="pretty-split-pane-component-inner">
16                        </div>
17                    </div>
18
19                    <div class="split-pane-divider" id="vertical-divider-1"></div>
20
21                    <div class="split-pane-component" id="center-right-component">
22                        <div class="split-pane fixed-right"><!-- ここ -->
23
24                            <div class="split-pane-component" id="center-component">
25                                <div class="pretty-split-pane-component-inner">
26                                </div>
27                            </div>
28
29                            <div class="split-pane-divider" id="vertical-divider-2"></div>
30
31                            <div class="split-pane-component" id="right-component">
32                                <div class="pretty-split-pane-component-inner">
33                                </div>
34                            </div>
35
36                        </div>
37                    </div>
38
39                </div>
40            </div>
41        </div>