Question

我试图让标准页眉/内容/页脚页面正常工作。

<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干净利落地完成，那么我们将不胜感激。

谢谢！

Answer 1

您的元素必须为absolute，您可以检查此（https://codepen.io/osublake/pen/azMONr）

如何创建一个包含可拖动分割器的响应式html div元素？

1 个答案: