Скрыть боковую панель/стоп-контейнер из упаковки

Question

У меня есть изображение и боковая панель.

<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 от расширения и сделать боковую панель недоступной при изменении размера окна?

Answer 1

быть честным, вы должны использовать адаптивные сетки для достижения этой цели, самозагрузки Твиттера имеет очень четкий способ реализации желаемого поведения, которую вы ищете, но есть много там ..

Bootstrap

Answer 2

у могли бы использовать,

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

событие изменения размера в JavaScript, проверить существующую ширину окна и в соответствии с ним, а затем скрыть/показать DIV с помощью document.getElementById('sidebar').style.visibility = 'hidden/visible' согласно вашему требованию.