如何使用 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 创建布局，因为在他们的站点中不存在任何类似的示例？

Classic sample in JSFiddle

My Sample in JSFiddle

Answer 1

你很接近。首先你没有在 left/right 痛苦中添加 content class，所以他们没有显示。然后你混淆了水平分割。 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',
});

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

How to create full horizontal row with Split.js?

javascript

split.js