javascript - 将 div 保持在浏览器窗口最右侧的问题，同时浏览器尺寸在动画效果后发生变化

Question

我有一个包含另外两个并排 div 的父 div。单击这些 div 从浏览器窗口的一侧移动到另一侧(单击左侧 div，它移动到最左侧，单击右侧 div，它移动到浏览器的最右侧)-我必须说到这里为止的所有内容工作如我所愿。

当我尝试通过捕获右下角并将其缩放到新尺寸来手动调整浏览器大小时，问题就出现了。当我这样做时，div 停留在完全相同的位置(原始浏览器尺寸的最右边)，因此“掉落”在视野之外，让这个 div 保持在浏览器的最右边对我来说至关重要窗口正在改变尺寸。

我知道如果说 div 的 css 属性设置为 right:0 它应该留在最右边但是由于某种原因 javascript 动画效果似乎没有考虑或覆盖它并将它保留在原始浏览器中最右边而不是遵循新的维度。

这是我当前的基本形式的代码，向您展示到目前为止我是如何做到的:

HTML:

<span id='one'>&nbsp;    
    <span id='two'>&nbsp;</span>
    <span id='three'>&nbsp;</span>
</span>

CSS:

#one {
    height:100px;
    width:210px;
    background-color:red;
    position:absolute;
    left:0;
}
#two {
    height:100px;
    width:100px;
    background-color:blue;
    float:left;
}
#three {
    height:100px;
    width:100px;
    background-color:green;
    float:right;
}

JavaScript:

$(document).ready(function(){
    $('#two').click(function(){
        window_width = $(document).width();
        element_width = $('#one').width();
        edge = window_width - element_width;
        $('#one').animate({right:edge, left:0}, 100).delay(0);
        console.log($('#one').css('left'));   
    });
});
$(document).ready(function(){
    $('#three').click(function(){
        window_width = $(document).width();
        element_width = $('#one').width();
        edge = window_width - element_width;
        $('#one').animate({left:edge, right:0}, 100).delay(0);
        console.log($('#one').css('left'));
    });
    console.log($('#one').css('left'));
});

如有任何帮助，我们将不胜感激 - 我已经搜索了好几天，并努力寻找任何解决方案 - 在此先感谢大家。

Answer 1

尝试在 css 文件中以 % 为单位设置大小，这样当您从分辨率较低的显示器打开 html 时，它们会调整大小。您还可以查看媒体查询。它们非常适合创建网页，在各种分辨率下看起来完全一样。