Question

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

Answer 1

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

Get relative position between 2 DOM elements using JavaScript

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？

有一个名为Responsive Web Design的css和javascript的新应用程序。响应式设计允许您根据不同的元素指定要应用的不同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/

的示例

这是boilerplate让你前进。

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

4 个答案: