jQuery可调整大小的包含 - 在右边留下一个空格

时间:2017-02-21 20:55:03

标签: jquery-ui jquery-ui-resizable

我有一个包含图像的div和一个可拖动且可调整大小的半透明窗口。我使用父div作为相应的jQuery UI交互的包含参数。但是当我调整窗口大小时,我只能将其大小调整为比父宽度小10px。无论我使用哪种图像。没有问题调整到完整的高度。没有问题拖到最右边或底部。 这是代码(在此处试试 - JS Fiddle

HTML:

<div id="container">
  <div id="navi">
    <img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
  </div>
  <div id="infoi">
  </div>
</div>

CSS:

#container {
  width: 100px;
  height: 100px;
  position: relative;
}

#infoi {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: lightblue;
  border: solid 1px navy;
  width: 100px;
  height: 100px;
  opacity: 0.5;
}

#navi {
  padding: 0px;
  position: absolute; 
}

#navi img {
  display: block;  
}

JS:

$("#infoi").draggable({
  containment: "#navi"
});
$("#infoi").resizable({
  containment: "#navi"
});

我玩过边距和填充,还查看了StackOverflow上的其他问题。它们都不像我的。关于使用可调整大小和可拖动的问题存在一些问题。在我的情况下,删除draggable不会影响问题,所以我不认为一起使用它们是一个问题。

0 个答案:

没有答案