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

我想使用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创建布局？

Classic sample in JSFiddle

My Sample in JSFiddle

最佳答案

你那里很近。首先，您没有向左/右疼痛添加content类，因此它们没有显示。然后，您混合了水平分割。 Here是一个工作的 fiddle 。

<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',
});

关于javascript - 如何使用Split.js创建完整的水平行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47690562/