可调整大小的包含对我不起作用

Resizable Containment not working for me

本文关键字：不起作用 包含 可调整      更新时间：2023-09-26

我是新来的，所以我不知道它是如何工作的。我正在尝试调整div的大小，但它没有正确调整父母内部的大小这是我在尝试的。你能帮帮我吗？我想在完整的父div 中调整蓝色div 的大小。我没有得到代码中缺少的内容。提前谢谢。

    <html>
      <head>
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>JS Bin</title>
        <style type="text/css">
          * {
            margin: 0px;
            padding: 0px;
          }
          #Container {
            position: absolute;
            top: 0px;
            left: 264px;
            width: 312px;
            height: 512px;
            background-color: silver;
          }
          #Parent {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 0px;
            height: 0px;
          }
          #resizable {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 256px;
            height: 256px;
            background-color: blue;
          }
        </style>
      </head>
      <body>
        <div id="resizableContainer1" style="top: 6px; left: 0px; width: 256px; height: 512px; background-color: red;">
        </div>
        <div id="Container">
          <div id="Parent">
            <div id="resizable"></div>
          </div>
        </div>
      </body>
<script>
    $(document).ready(function() {
      $("#resizable").resizable({
        "containment": "#Container"
      });
    });</script>
    </html>
这个

呢：

  • 从 #Parent 中删除宽度：0;和高度：0;
    • 从
  • 使 #Parent 相对
  • 将包含更改为 #Parent
  • 从 #resizable 中删除 CSS 位置：绝对;、左：0;和顶部：0;
    • 删除

示例：http://jsbin.com/aDUMelI/1/edit

$("#resizable").resizable({
    containment: "#Parent"
});

.css：

#Parent {
      position: relative;
      top: 0px;
      left: 0px;
      width:auto;
      height:100%;
}
#resizable {
       display:block;
       width: 256px;
       height: 256px;
       background-color: blue;
}

只要去掉"containment"中的双引号，你的母亲div 就不是#Container，而是#Parent

你的脚本应该是， 

$(document).ready(function() {
      $("#resizable").resizable({
        containment: "#Parent"
      });
    });
相关文章：