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

这是CSS或JavaScript？我只需要将div更改为显示：如果它出现在另一个div的20px之内，则不显示。谢谢如何隐藏一个div如果它与另一个div重叠

来源

2011-09-12 user852974

是否有你想要做什么原因呢？不过，这取决于你为什么要去那里可能会有更好的选择。 – deztructicus

是的，它是这样的，如果用户使他们的浏览器窗口小，我的网站看起来不拥挤 – user852974

它可能会更好看，如果你只是设置一个最小宽度，所以滚动条，当它变得太小时出现。（例如它是如何做的：P） – Andrew

我会尝试使用jquery来检查对象之间的距离。看看这个帖子

Get relative position between 2 DOM elements using JavaScript

来源

2011-09-12 21:56:24

您可以添加在窗口大小是被炒鱿鱼的事件处理程序。你可以用javascript或jQuery来做到这一点。 jQuery的很容易：

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

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


}

希望这有助于

来源

2011-09-12 22:04:18

基于您的评论：

是的，它是如此，如果用户使他们的浏览器窗口小我的网站看起来不拥挤

而不是回答你问的问题，这里是回答R键的问题，你没有问：

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

有一个新的应用程序的CSS和JavaScript叫Responsive Web Design。响应式设计允许您根据不同的元素指定不同的CSS规则。有关此技术的一个很好的示例，请在The Boston Globe的网站上调整浏览器的大小。他们在本周的某个时候整合了这项技术。

这里将实现这个CSS的例子：从http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

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

    .content { 
    float: left; 
    } 

    .social_icons { 
    display: none 
    } 

    // and so on... 

}

例如这里是一个boilerplate，让你去。

来源

2011-09-12 22:05:51

不错，不知道这可以用CSS来完成。这是跨浏览器吗？ –

当然是。这是一个样板http://thatcoolguy.github.com/gridless-boilerplate/ –

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

来源

2012-02-28 03:44:05 user230451

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

回答

相关问题