将 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 并赋予这两个适当的左/右/上/下值。

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