如何让小格子靠近可调整大小的容器边界？

Question

这更容易解释我有什么：http://jsfiddle.net/Kuq5a/

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

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

我的朋友建议使用position: absolute但它没有做我所需要的。用灰色框表示，它们附着在整个窗口上！

Answer 1

我做到了：JSFiddle

我用来代替top: 10pxbottom: 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"); 
    }