Question

我正在创建一个带有几个div和徽标。

当页面调整大小时，徽标位于div下面，这不是真正的问题。

我确实希望在重叠发生之前将图像和div调整到最小宽度。比方说，例如用户在1920x1080屏幕上打开页面，图像宽250px，div框800px。但是，当他调整大小时，图像和div将相互“挤压”到一个点（图像的最小宽度= 100px; div = 400px）。

我编写的代码在这些元素开始重叠时会显示出来，并且它可以工作，但我不知道如何调整元素的大小。目前，我只是减去1，但这不起作用，因为在调整大小时会出现重叠的时间。

这是jQuery代码：

$(window).resize(function(e) {
    if($(window).width()-$('.info').width()-170-$('.logo').width() < 0 && $('.logo').width() > 100 && $('.info').width() > 400) {
        $('.info').width($('.info').width()-1);
        $('.logo').width($('.logo').width()-1);
    } else if($(window).width()-$('.info').width()-170-$('.logo').width() > 0 && $('.logo').width() < 250 && $('.info').width() < 800) {
        $('.info').width($('.info').width()+1);
        $('.logo').width($('.logo').width()+1);
    }
});

我很感激帮助您正确调整这些元素的大小。我知道我显然错过了实际调整元素大小的东西。有什么想法吗？

Answer 1

所以我自己解决了。在此发布以供将来参考，或者如果某人有更好的方法（或甚至对此进行改进）。这是我第一次尝试这样的事情，所以请放轻松呵呵

$(window).resize(function(e) {
resizeAfter = $(window).width();
if($(window).width()-$('.info').width()-170-$('.logo').width() < 0) {
    if($('.logo').width() > 100){
        $('.logo').width($('.logo').width() - (resizeBefore-resizeAfter));
        $('.logo').height($('.logo').width()*ratio);
        if($('.logo').width() < 100) {
            $('.logo').width(100);
            $('.logo').height(100*ratio);
        }
    } else if($('.info').width() > 510){
        $('.info').width($('.info').width() - (resizeBefore-resizeAfter));
        if($('.info').width() < 510) {
            $('.info').width(510);
        }
    }
} else if($(window).width()-$('.info').width()-170-$('.logo').width() > 0){
    if($('.info').width() < 800){
        $('.info').width($('.info').width() + (resizeAfter-resizeBefore));
        if($('.info').width() > 800) {
            $('.info').width(800);
        }
    } else if($('.logo').width() < 250){
        $('.logo').width($('.logo').width() + (resizeAfter - resizeBefore));
        $('.logo').height($('.logo').width()*ratio);
        if($('.logo').width() > 250) {
            $('.logo').width(250);
            $('.logo').height(250*ratio);
        }
    }
}
resizeBefore = $(window).width();
});

调整元素大小以避免重叠

1 个答案: