0

Jquery UI のサイズ変更可能なプラグインを使用しています。サイズ変更が発生すると、別の div を適切なオフセットで更新して、その位置を維持します。Chrome で 100% にズームすると、これはすべて正常に機能します。90% にズームすると、2 番目の 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/

4

1 に答える 1

1

-------------編集--------------- 新しい回答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"});
于 2012-09-27T17:58:53.127 に答える