Question

我有一个div，它从窗口右侧的固定位置开始，但是它是可拖动的（使用javascript）和可调整大小的（使用css）。问题是，如果首先调整div的大小（抓住右下角），它将无法正确调整大小。它将从右侧保持其固定位置，然后从左侧开始增大或缩小。但是，如果首先拖动div，则调整大小将按预期进行。这些是div的当前CSS属性：

#resize {
  position: fixed;
  right: 30px;
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
}

演示：

https://jsfiddle.net/mravdo52/2/

我尝试了各种解决方法。由于div的移动似乎可以使resize正常工作，因此我尝试在加载元素后仅将div移动一个像素，但这是行不通的，因为我认为两个元素之间存在计时问题元素的负载，javascript的执行以及CSS的负载。随后，我尝试使用jQuery promise()和queue()先应用css，然后再移动元素，但这些都不起作用。我也尝试过使用jQuery UI resizable()，但似乎根本没有调整大小。我目前还没有主意，不胜感激。

Answer 1

仅CSS解决方案： 您只需要最初将left赋予固定位置的div。

解决方案说明：之所以在拖动元素后工作是因为它应用了左位置，所以我们可以在拖动元素之前给出左位置，这样它就可以工作！

首先尝试提供left: auto/initial/inherit，但没有成功。因此，您可以输入以下内容：左：calc（100％-120px）;

（120像素代表右位置30像素与div宽度90像素之和）

#resize {
  position: fixed;
  right: 30px;
  left: calc(100% - 120px);
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
}

更新的小提琴：https://jsfiddle.net/mravdo52/6/

调整元素大小的问题，该元素在右侧是固定位置

1 个答案: