隱藏側邊欄/停止div容器從包裝

我有一個圖像和側邊欄。隱藏側邊欄/停止div容器從包裝

<div id="outer" style="max-width:1020px;min-width:730px;overflow:hidden;overflow-x:hidden;overflow-y:hidden;"> 

    <div id="image" style="float:left;max-width:720px;"> 
    <img src="image.jpg" alt="" style="max-width:720px;" /> 
    </div> 

    <div id="sidebar" style="width:300px;float:right;"> 
    content 
    </div> 

</div>

我希望側欄消失，如果窗口調整大小，沒有足夠的空間來顯示側邊欄。不幸的是，當窗口被調整大小時，側邊欄會掉到最下方並且會被包裹起來。

我試過「white-space：nowrap;」，但這似乎並不適用於此。圖像容器可以有不同的高度，所以我不能將它設置爲固定的高度。

如何停止擴展「外部」div，並在調整窗口大小時使側欄脫離視圖？

來源

2012-05-05 reggie

說實話，你應該使用一個響應電網實現這一目標，引導通過Twitter已經實現你正在尋找所需的行爲的一個非常明確的方式，但有很多在那裏..

Bootstrap

來源

2012-05-05 14:54:12

ü可以使用，

window.onresize = function(event) { 
    if(document.body.cilentwidth < 1020) 
     document.getElementById('sidebar').style.visibility = 'hidden'; 
    else 
     document.getElementById('sidebar').style.visibility = 'visible'; 
}

resize事件在JavaScript中，檢查現有Windows的寬度，並根據它，然後隱藏/顯示根據您的要求使用document.getElementById('sidebar').style.visibility = 'hidden/visible'股利。

來源

2012-05-05 15:00:17

我已實施您的建議。側邊欄是隱藏的。但是，無論何時調整窗口大小，側欄用於顯示的空間都是空的。我已經嘗試了可見性=崩潰，但它具有相同的效果。 – reggie

使用'document.body.cilentwidth'進行寬度比較。看我**編輯**我的答案。 –

隱藏側邊欄/停止div容器從包裝

回答

相關問題