Сетка для макета

[Konstantin99]

Здравствуйте, верстаю сетку 3х3 в которой можно размещать блоки любого размера в данном диапазоне (1х1, 2х3, 3х1 и тд) с использованием классов, реализовано это все на float:left и столкнулся с проблемой, что если указать вертикальный блок по центру или справа, то остальные блоки будут обтекать его как и должны справа или снизу, но место слева от него остается пусты и туда нужно засунуть блок который идет сразу после вертикального. Новые классы использовать нельзя, либо как то сss помогите решить, либо с использованием js. Спасибо за любую помощь.

 

Исходники https://jsfiddle.net/svfvs5cb/

Edited February 28, 2017 by Konstantin99

[web-tech]

9 минут назад, Konstantin99 сказал:

К сожалению дополнительные классы нельзя использовать и позицию данного высокого контейнера мы заранее не знаем.

 

[web-tech]

13 часа назад, Konstantin99 сказал:

для это разметки не подскажешь что можно сделать?

 

[web-tech]

http://masonry.desandro.com/#getting-started

[Konstantin99]

6 минут назад, web-tech сказал:

http://masonry.desandro.com/#getting-started

К сожалению дополнительные классы нельзя использовать и позицию данного высокого контейнера мы заранее не знаем.

[Konstantin99]

4 минуты назад, web-tech сказал:

 

Нужно что бы высокий блок оставался на своем месте

 

8 минут назад, web-tech сказал:

 

Извиняюсь не посмотрел на разметку.Спасибо то что нужно

[web-tech]

2 минуты назад, Konstantin99 сказал:

Нужно что бы высокий блок оставался на своем месте

 

Так он и останется - я для примера поменял его местами, чтобы показать, что будет работать и так, и так.

 

[Konstantin99]

3 часа назад, web-tech сказал:

Так он и останется - я для примера поменял его местами, чтобы показать, что будет работать и так, и так.

 

для это разметки не подскажешь что можно сделать?

<div class="container">
  <div class="wrapper">
    <div class="v1g2"></div>
    <div class="v2g1"></div>
    <div class="v1g1"></div>
    <div class="v1g1"></div>
    <div class="v1g1"></div>
    <div class="v1g1"></div>
    <div class="v1g1"></div>
  </div>
</div>