javascript - 如何让小 div 靠近可​​调整大小的容器边框？

Question

用我所拥有的更容易解释：http: //jsfiddle.net/Kuq5a/

我的目标是使所有四个彩色框与虚线框的每个角保持相同的距离（单向 10 像素）。当边界框是静态的时候很容易，但在我的情况下，它会被用户调整大小，滑块作为一种方法。

具体来说，当边界框增长时，我试图让绿色向右滑动，蓝色向下，黄色对角线向下和向右滑动。

我的朋友建议使用position: absolute，但它没有做我需要的。显示为灰色框，它们附加到整个窗口！

Answer 1

我做到了：JSFiddle

我用而不是top: 10px bottom: 10px.

我不太确定灰色框应该如何反应，所以我没有更改它们的属性......

Answer 2

如果你想用 Jquery 单独做这件事，你会这样做。

function resize(px) {
    $(".colorbox").css("width", px+"px");
    $(".colorbox").css("height", px+"px");
    $("#g").css("margin-left", px-100+"px");
    $("#b").css("margin-top", px-100+"px");     
    $("#y").css("margin-left", px-100+"px");
  }