Question

我是新来的，所以我不知道它是如何工作的。我正在尝试调整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>

Answer 1

怎么样：

从 #Parent

width：0;

height：0;

使 #Parent relative
将遏制更改为 #Parent
从 #resizable 位置：绝对; ，左：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;
}

Answer 2

只需取消"containment"中的双引号即可，您的母亲div不是#Container，而是#Parent

你的脚本应该是，

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

可调整大小的遏制不适合我

2 个答案: