3

我正在尝试使标准页眉/内容/页脚页面正常工作。

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
</head>
<body>
  <div class="panel-container" style="display: flex; flex-direction: row; 
      flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; width: 100%; border: 1px solid silver; overflow: hidden; touch-action: none;">
    <div class="A" style="flex: 0 0 auto; 
        padding: 10px; min-height: 200px; min-width: 10px; white-space: nowrap; background:#838383; color:white;">
      A
    </div>

    <div class="A-splitter" style="flex: 0 0 auto;
        width: 18px;  
        background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
        min-height: 200px;
        cursor: col-resize;">
    </div>

    <div class="D" style="flex: 1 1 auto;
        padding: 10px;
        min-height: 200px;
        min-width: 200px;">
      D
    </div>

    <script>
      window.$ = window.jQuery = require('jquery');
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript" crossorigin="anonymous"></script>
    <script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.js"></script>
    <script>
      $(".A").resizable({
        handleSelector: ".A-splitter",
        resizeHeight: false,
        onDrag: function(e, $el, newWidth, newHeight, opt) {
          $el.width(newWidth);
          return false;
        }
      });
    </script>
</html>

我在内容 div 中有 jquery 分隔符，但似乎无法确保 div D 的最小宽度。

这是迄今为止我最接近的解决方案。如果可以使用 Semantic-UI 干净地完成，将不胜感激。

谢谢！

4

1 回答 1

0

你的左边元素必须有position: absolute;.

您可以查看此示例：https ://codepen.io/osublake/pen/azMONr

于 2019-03-09T12:44:54.407 回答