可调整大小的div不会保留在包含参数内

Question

调整中间div的大小时，它不会停留在网格右边界的containment参数范围内，并且不会向左调整大小。

http://jsfiddle.net/dKuER/8/（明确示例，已更新）

HTML

<div id='grid'>

    <div class='outline first top'>
        <div class='container'></div>
    </div>
    <div class='outline top'>
        <div class='container resizable'></div>
    </div>
    <div class='outline last top'>
        <div class='container'></div>
    </div>
    <div class='outline first bottom'>
        <div class='container'></div>
    </div>
    <div class='outline bottom'>
        <div class='container'></div>
    </div>
    <div class='outline last bottom'>
        <div class='container'></div>
    </div>

</div>

JS

$(document).ready(function() {
    $('.resizable').resizable({
        containment: "#grid", // Updated to reflect answer, but wasn't the issue.
        handles: "ne,se,nw,sw"
    });
});​

Answer 1

尝试：

containment: "#grid",

不是禁闭。

Answer 2

看起来调整大小不是在为大纲类设置的边距中计算的。如果删除它们，则调整大小仍会包含在#grid元素中。我不确定你希望如何处理其他一切，但我建议绝对定位可调整大小的元素和$ grid容器的相对位置。