Question

我的主要内容位于页面中心，宽度约为900px。在大屏幕上，我的内容的右边缘和浏览器窗口的右边之间有足够的空间，我可以在右下角显示一个小的100x100px div，它看起来很好，因为该div和主要内容。当屏幕尺寸小于相对位置的div与我的内容的右下角重叠时。如果它在我的内容的20px范围内，我怎么能设置display = none？感谢

Answer 1

我会在这里寻找纯CSS解决方案。听起来像是media queries的完美案例：

#rightdiv {
    position: relative;
    width: 100px;
    height: 100px;
}

@media screen and (max-width: 1000px) {
    #rightdiv {
        display: none;
    }
}

当浏览器窗口大小至少为1000px宽度时，CSS将仅显示#rightdiv元素。如果它变小，则应用display: none属性。

示例：http://jsfiddle.net/7CCtH/

Answer 2

至于媒体查询不熟悉IE我建议您为problem提供此解决方案：

DEMO

使用的代码：

function hideSmall(){
    var smallW = $('#small').outerWidth(true);
    var winW = $(window).width();
    var mainW = $('#main').outerWidth(true);
    var calculateW = (winW-mainW)/2;

    if ( calculateW <= smallW ){
         $('#small').hide();   
    }
    else{
         $('#small').show();
    }
}
hideSmall();

$(window).resize(function(){
   hideSmall();
});

或类似THIS

如果它与另一个div重叠，则隐藏div

2 个答案:

DEMO