0

我正在使用 Jquery UI 可调整大小的插件。当发生调整大小时，我用适当的偏移量更新另一个 div 以保持其位置。当缩放为 100% 时，这一切在 Chrome 中都可以正常工作。如果我放大到 90%，有时第二个 div 中的表格会向下移动到第一个 div 下方。

HTML：

<div>
    <div class="left"></div>
    <div class="right">
        <table><tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
        </table>
    </div>
</div>

Javascript：

$(".left").resizable({
    resize: function ()
    {
        $(".right").css({marginLeft:$(this).width() + "px"});
    }
});​

​ CSS：

div
{
  display:block
  position:absolute;
}
.left
{
  width:99px; 
  height:500px;
  background-color:gray;   
  display:block;
  float:left;
  position:relative;
}
.right
{
    margin-left:99px;
    background-color: blue;
    display:block;
    position:relative;
}

table
{
    width:100%;
}

我的问题是，如何正确计算 .right div 的左边距？

要重现该问题，请将 chrome 缩放到 90% 并在此小提琴中调整左侧元素的大小：http: //jsfiddle.net/johnkoer/FyE6f/45/

4

1 回答 1

1

-------------编辑--------------- 新答案http://jsfiddle.net/FyE6f/55/

（看起来只是将溢出设置为自动可能与下面的代码一样有效）

$(".left").resizable({
    resize: function ()
    {
        $(".right").css({overflow:"hidden"});
        $(".right").css({marginLeft:$(this).width() + "px"});
    },
    stop: function ()
    {
        $(".right").css({overflow:"auto"});
    }
});​

- - - - 老的 - - - - -

我能够修复它的唯一方法是在边距上添加 1，不幸的是它在 div 之间添加了一个丑陋的白色 1px 空间。 http://jsfiddle.net/FyE6f/53/

$(".right").css({marginLeft:($(this).width() + 1) + "px"});
于 2012-09-27T17:58:53.127 回答