Question

当我尝试从顶部调整元素大小时（即使它看起来像是在调整大小），我注意到底部的大小调整了。

HTML：

<div class="resizeme" style="background:yellow;">Resize me from the top</div>

JS

$(".resizeme").resizable({
    handles: "n,s,e,w"
});

jsfiddle：

http://jsfiddle.net/mody5/4x3r8vsq/

我如何纠正？

Answer 1

通过调整大小和更改高度和宽度，您不会更改可调整大小元素中的内容定位或对齐方式。

所以，实际上可调整大小的元素表现得如预期的那样，它看起来很奇怪而没有参考点。可以想象它就像从你抓住的手柄上拉伸它，另一边在你抓住的边缘移动时保持不动。

试试这个：

jsFiddle

＆＃13;

$(document).ready(function() {
  $(".resizeme").resizable({
    handles: "n,s,e,w"
  });
});

＆＃13;

.resizeme {
  position: relative;
  top:20px;
  background: yellow;
  padding: 6px;
  height: 100px;
  width: 200px;
}
#top {
  position: fixed;
  top: 28px;
  background: red;
}
#bottom {
  position: fixed;
  bottom: 60px;
  background: blue;
}

＆＃13;

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div class="resizeme">
</div>
<span id="top">Resize me from the top</span><span id="bottom">Resize me from the bottom</span>

＆＃13;

Jquery ui从顶级错误调整大小

1 个答案: