0

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

2 回答 2

1

那这个呢：

  • 删除宽度：0；和高度：0；来自#父母
  • 使#Parent相对
  • 将遏制更改为#Parent
  • 删除 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;
}
于 2013-11-14T18:32:55.943 回答
0

Just take off the double quotes in "containment" and your mother div is not #Container, it is #Parent

Your script should be, 

$(document).ready(function() {
      $("#resizable").resizable({
        containment: "#Parent"
      });
    });
于 2013-11-14T18:41:36.223 回答