如果它與另一個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/的示例

這是一個讓你前進的樣板 。