文章/答案/技术大牛

发布

社区首页 >问答首页 >如何创建包含可拖动拆分器的响应式html div元素？

问如何创建包含可拖动拆分器的响应式html div元素？
EN

Stack Overflow用户

提问于 2018-03-22 23:43:09

回答 1查看 270关注 0票数 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>

我在content div中有jquery分隔符，但似乎不能确保div D的最小宽度。

到目前为止，这是我最接近的解决方案。如果能用语义UI干净利落地完成这项工作，我们将不胜感激。

谢谢!

html

css

flexbox

responsive

semantic-ui-css

回答 1

Stack Overflow用户

发布于 2019-03-09 20:44:54

您的left元素必须具有position: absolute;。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49432868

复制

相似问题

问如何创建包含可拖动拆分器的响应式html div元素？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建包含可拖动拆分器的响应式html div元素？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建包含可拖动拆分器的响应式html div元素？
EN