jquery - 将 2 个 div 粘贴到右上角和左下角

Question

我正在使用 jQuery 的 resizable()。我希望能够在右上角制作一个 div，而另一个 div 始终位于左下角。我希望将这 2 个 div 设置为可调整大小的句柄 ne 和 sw 的位置。

如何让 $(".td") 和 $(".tl") 粘在 $ 的右上角和左下角(".nWrapper") 在任何时候？

html:

<div class="lWrapper">
    <div class="nWrapper">
        <div class="tWrapper">
            <div class="td"></div>
            <div class="tl"></div>
        </div>
    </div>
</div>

CSS:

.lWrapper{
    position: relative;
    background-color: #ff0000;
    width: 200px;
    height: 200px;
}
.nWrapper{
    position: absolute;
    background-color: #00ff00;
    width: 200px;
    height: 100px;
}
.tWrapper{
    position: absolute;
}
.td{
    position: relative;
    background-color: #0000ff;
    width: 12px;
    height: 12px;
    left: 0; /*want it left bottom*/
    bottom: 0;
}
.t1{
    position: relative;
    background-color: #ff6600;
    width: 12px;
    height: 12px;
    float: right; /*want it right top*/
    top: 0;
}

Example Fiddle

Answer 1

您需要使包装 div (nWrapper) 具有 position: relative 和较小的具有 position: absolute 并给这两个适当的 left/右/上/下值。

在这里查看:https://jsfiddle.net/ze9go151/2/