1

我使用 split.js 创建了这个分屏视图。两个 div 并排显示。您可以拖动中间以使更大或更小。现在，如果屏幕小于 768 像素，让两个 div 自动落在彼此下方会很好，但当然要保留分屏功能。

更好的是，除了在缩放浏览器时自动更改视图之外，还可以让用户自己选择水平/垂直视图。因此，他们可以通过这种方式推翻标准行为。

我已经尝试过使用 bootstrap 4，cfr。https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be，但它们似乎不能很好地协同工作。

我的代码：https ://jsfiddle.net/rjtpvhn1/1/

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="content">
      <div class="split a">text left</div>
      <div class="split b">text right</div>
    </div>
  </body>
</html>

CSS：

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      height: 100vh;
      font-size: 20px;
    }

    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-items: center;
      align-items: center;
    }

    .split {
      width: 100%;
      height: 100%;
      padding: 30px;
      border: 1px solid;
      overflow: auto;
    }

    .gutter {
      cursor: e-resize;
      height: 100%;
      background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ccc;
    }

JAVASCRIPT：（包括https://unpkg.com/split.js/dist/split.min.js）

Split(['.a', '.b'], {
  gutterSize: 9,
  sizes: [50, 50]
});
4

0 回答 0