如何隱藏一個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重疊

回答

相關問題