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

[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]

  On 2/28/2017 at 4:05 PM, Konstantin99 said:

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

Expand  

 

[web-tech]

  On 2/28/2017 at 7:48 PM, Konstantin99 said:

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

Expand  

 

[web-tech]

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

[Konstantin99]

  On 2/28/2017 at 3:57 PM, web-tech said:

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

Expand  

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

[Konstantin99]

  On 2/28/2017 at 4:14 PM, web-tech said:

 

Expand  

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

 

  On 2/28/2017 at 4:14 PM, web-tech said:

 

Expand  

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

[web-tech]

  On 2/28/2017 at 4:21 PM, Konstantin99 said:

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

 

Expand  

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

 

[Konstantin99]

  On 2/28/2017 at 4:25 PM, web-tech said:

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

 

Expand  

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

<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>