Question

我正在使用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的左边距？

要重现此问题，请将镶边缩放至90％并调整此小提琴中左侧元素的大小：http://jsfiddle.net/johnkoer/FyE6f/45/

Answer 1

<强> ------------- EDIT --------------- 新答案http://jsfiddle.net/FyE6f/55/

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

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

Chrome中可调整大小的Div会在放大时导致内容转移

1 个答案: