Go-to way для боковой панели + две колонки с разной высотой?

Question

Я работаю на веб-сайте со следующей планировкой: http://i.imgur.com/EyhNL4s.png

Info;

• Красная отмеченная (фиксированная) боковая штанга, которая должна свернуть/свернуть на мобильный телефон.
• Остальные блоки - это только divs с переменной высотой.

Теперь я был/интересно, какой лучший подход должен был бы создать это. Я попробовал несколько, начиная с размещения содержимого (переменные высоты divs) как в обертке, которому давали поплавок: слева (пытается) использовать jQuery Masonry. Оба способа до сих пор неуместны. По какой-то причине мои divs не будут течь рядом друг с другом.

Это высоты разделов, которые я использую, исходя из моего дизайна;

#green { 
    height: 312px; 
} 

#blue { 
    height: 752px; 
} 

#orange { 
    height: 876px; 
} 

#purple { 
    height: 618px; 
} 

#yellow { 
    height: 876px; 
} 

Может ли кто-нибудь отправить меня в правильном направлении?

Редактировать; я забыл упомянуть, что когда я делаю экран меньше, блоки контента должны быть расположены друг под другом. (И боковая панель должна разрушаться, но позже я займусь этой «проблемой».)

Answer 1

Вы можете попробовать создать 2 родительских элемента. Что-то вроде .sidebar и .content. Затем вы можете поплавать с ними, используя float: left.

Вы HTML будет выглядеть примерно так:

<div class="sidebar"> 
    <div id="red"></div> 
</div> 
<div class="content"> 
    <div id="green"></div> 
    <div id="orange"></div> 
    <div id="purple"></div> 
</div> 
<div class="sidebar"> 
    <div id="blue"></div> 
    <div id="yellow"></div> 
</div> 

Ваш CSS будет выглядеть следующим образом:

.sidebar, 
.content { 
    float: right; 
} 

Иное решение может быть использовать Flexbox. Чтобы сделать это, вы должны создать другой родительский элемент вокруг боковой панели и содержимого. CSS для этого будет выглядеть (больше не нужен предыдущий CSS):

.parent { 
    display: flex; 
    flex-direction: column; 
} 

.sidebar, 
.content { 
    width: 33%; // Or however wide you need these 
} 

Надеюсь, что это поможет!