如何使用Split.js创建完整的水平行？

Question

我想使用Split.js创建我的特定布局，例如

<div id="a" class="split split-horizontal">
</div>
<div id="b" class="split split-horizontal">
    <div id="d" class="split content"></div>
    <div id="e" class="split content"></div>
    <div id="f" class="split content"></div>
</div>
<div id="c" class="split split-horizontal">
</div>

<script>
    Split(['#a', '#b', '#c'], {
        gutterSize: 20,
        cursor: 'pointer'
    });
    Split(['#d', '#e', '#f'], {
        direction: 'vertical',
        sizes: [15, 70, 15],
        gutterSize: 20,
        cursor: 'row-resize'
    });
</script>

但是上面的代码不起作用。

谁能帮我？我如何创建布局，Split.js因为在他们的网站中不存在类似的示例？

JSFiddle中的经典样本

我在JSFiddle中的样本

Answer 1

你那里很近。首先，您没有将content课程添加到左/右疼痛中，因此它们没有显示。然后，您混合了水平分割。这是一个工作的小提琴。

<div id="a" class="split content"></div>
<div id="b" class="split">
    <div id="d" class="split content split-horizontal"></div>
    <div id="e" class="split content split-horizontal"></div>
    <div id="f" class="split content split-horizontal"></div>
</div>
<div id="c" class="split content"></div>

Split(['#a', '#b', '#c'], {
    gutterSize: 20,
    cursor: 'pointer',
    direction: 'vertical',
});
Split(['#d', '#e', '#f'], {
    sizes: [15, 70, 15],
    gutterSize: 20,
    cursor: 'row-resize',
});