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

Question

这是CSS还是JavaScript？如果一个div与另一个div的距离小于20像素，我只需要让它变成display:none。谢谢。

- user852974

---

你想这样做有什么原因吗？虽然这是可能的，但是根据你为什么想要这样做，可能会有更好的替代方案。 - Zeeno

是的，如果用户将浏览器窗口缩小，我的网站看起来就不会显得拥挤。 - user852974

如果您只设置一个最小宽度，那么当宽度变得太小时，会出现滚动条，这样看起来可能会更好。 （例如，SO是如何做到的:P） - Andrew

Answer 1

试试这个 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();
    }
}

- user230451

Answer 2

您可以添加一个事件处理程序，在窗口调整大小时触发。您可以使用JavaScript或jQuery来完成这项任务。jQuery使其变得轻松：

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

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


}

希望这能有所帮助

- kasper Taeymans

Answer 3

根据您的评论：

是的，如果用户把他们的浏览器窗口缩小，我的网站看起来就不会显得拥挤。

而不是回答您提出的问题，这里是一个回答您没问到的问题的答案:

如何根据浏览器大小调整/定位/css化页面元素？

有一种新的 CSS 和 JavaScript 应用叫做 响应式 Web 设计。 响应式设计允许您指定不同的 CSS 规则，以应用于不同的元素。 有一个很好的示例，可以在 The Boston Globe 的网站上调整浏览器大小。 他们刚刚在这个星期集成了这项技术。

这里是实现它的 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/

这里提供一个样板来帮助您入手。

- Michael Jasper

---

不错，我不知道 CSS 可以做到这一点。这个跨浏览器吗？ - kasper Taeymans

当然可以。这是一个样板文件：http://thatcoolguy.github.com/gridless-boilerplate/ - Michael Jasper