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

Question

这是CSS还是javascript？ 我只需要将div更改为显示：如果它在另一个div的20px内，则为none。 谢谢

Answer 1

我会尝试使用jquery来检查对象之间的距离。 看看这篇文章

使用JavaScript获取2个DOM元素之间的相对位置

Answer 2

试试这个https://github.com/brandonaaron/jquery-overlaps

//Listen to the event that will be triggered on window resize:
window.onresize = function(event) 
{
    // test if one element overlaps another
    if($('#div1').overlaps('#div2'))
    {
        //Do stuff, like hide one of the overlapping divs
        $('#div1').hide();
    }
}

Answer 3

您可以添加在调整窗口大小时触发的事件处理程序。 你可以用javascript或jquery做到这一点。 jquery让它变得简单：

window.onresize = function(event) {
var h=$(window).height();
var w=$(window).width();

if(h<400 && w < 300){
 //hide divs
 $('#yourdivid1').hide();
}


}

希望这可以帮助

Answer 4

根据您的评论：

是的，如果用户使浏览器窗口变小，我的网站看起来并不拥挤

而不是回答你问的问题，这是你没有问过的问题的答案：

如何根据浏览器大小调整页面元素的大小/位置/ cssify？

有一个名为响应式网页设计的css和javascript的新应用。 响应式设计允许您根据不同的元素指定要应用的不同css规则。 有关此技术的一个很好的例子，请在波士顿环球报的网站上调整浏览器大小。 他们本周在某个时候整合了这项技术。

这是一个实现这个的css的例子：

@media screen and (min-width: 480px) {

  .content {
    float: left;
  }

  .social_icons {
    display: none
  }

  // and so on...

}

来自http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/的示例

这是一个让你前进的样板 。