3

我有以下基本布局：

<div class="Container">
    <div class="Content"></div>
    <div class="Selector"></div>
</div>

这个想法是选择器 div 在内容中标记一个区域，并且可以调整该区域的大小：

div.Container
{
    border: 2px solid #00F;
    width: 240px;
    height: 300px;
    overflow: auto;
    position: relative;
}

div.Selector
{
    position: absolute;
    top: 0px !important;
    left: 80px;
    width: 50px;
    height: 500px;
    border-left: 2px solid #F00;
    border-right: 2px solid #0F0;
    z-index: 10000;
}

div.Content
{
    height: 500px;
    border: 1px solid #DEDEDE;
   background-color: #EFEFEF; 
}

和可调整大小的选择器：

$(document).ready(function() {
    $("div.Selector").resizable();
});

这个问题可以在这里看到 - http://jsfiddle.net/sXqbV/2/ - 当容器水平滚动时发生。

一旦 div 被调整大小（通过稍微拖动它的右边缘），它的左边位置就会减少（相对于滚动位置）：

在此处输入图像描述

我在垂直滚动时遇到了类似的问题，但我通过添加!important到顶部样式来解决它。不过我不能用左边的位置来做，因为我可能也需要它从左边调整大小。

我该如何解决这个问题？

4

1 回答 1

4

我从来没有使用过可调整大小，我只是浏览了它的代码并找到了它。（所以不要问我为什么）

$(document).ready(function() {
    $("div.Selector").resizable({containment: $('div.Container')}); 
});

见小提琴

于 2012-02-04T18:51:49.183 回答