如何讓小格子靠近可調整大小的容器邊界？

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"); 
    }