Как так сверстать

[DioNiR]

Добрый день Люди. Я в верстке не сильно силен, но вот перед мной встала задача, надо сделать что то похожее, и желательно на уровне CSS.

 

Все блоки имеют одну ширину.

 

Пробовал через inline-block, но второй уровень сразу съезжает. 

Да можно заморочиться и на уровне PHP или JS высчитать все, и задать положение блока более жестко, но хотелось бы более правильного решения.

 

Или в какую сторону копать?

Edited March 2, 2016 by DioNiR

[satantx]

Таблицей?

<table>  <tr>    <th>1</th>    <th rowspan="2">2</th>    <th>3</th>    <th>4</th>  </tr>  <tr>    <td>5</td>    <td>6</td>    <td>7</td>  </tr></table>

[DioNiR]

Таблица не подходит, т.к в дальнейшем буду делать, возможность перемешать объекты из этого участка, в другой. И делать просчеты на JS в таком случае будет адским.

[li4e]

Вам просто по ширине нужно так же разместить или чтобы еще по высоте автоматически блоки выравнивались?

 

То есть так пойдет?

https://jsfiddle.net/kybLwbjj/2/

[DivMan]

Вам просто по ширине нужно так же разместить или чтобы еще по высоте автоматически блоки выравнивались?

 

То есть так пойдет?

https://jsfiddle.net/kybLwbjj/2/

 

А зачем position: relative;?

[li4e]

 

Вам просто по ширине нужно так же разместить или чтобы еще по высоте автоматически блоки выравнивались?

 

То есть так пойдет?

https://jsfiddle.net/kybLwbjj/2/

 

А зачем position: relative;?

 

Забыл убрать, когда делал по другому

[DioNiR]

Тут именно дело в том, что такие блоки как второй, может быть и шире и длинее, причем неважно где.

 

Если объяснить суть задачи, то это инвентарь в игре, и вещи там хранятся не так чтоб, одна вещь 1 ячейка как в нормальных играх, так несколько разных вещей, разные размеры.

И нужна возможность переносить вещи, а точнее дивы.

 

Вот я и интересуюсь, может ли браузер их правильно расставить сам, не прибегая к расчетам на JS и PHP.

[li4e]

Думаю не сможет, поправьте если не прав, единственный вариант который мне видится, это высчитывать все с помощью JS на лету.

[by chris]

Думаю не сможет, поправьте если не прав, единственный вариант который мне видится, это высчитывать все с помощью JS на лету.

Подправил ваш код

 

https://jsfiddle.net/n57020kd/1/

Edited March 2, 2016 by by chris

[Igor Schnaider]

Все блоки имеют одну ширину.

 

Тут именно дело в том, что такие блоки как второй, может быть и шире и длинее, причем неважно где.

 

Противоречите сами себе.

[Int]

Сдаётся мне, нужно применить columns.

Я так понимаю, если ячейка начинает хоть сколько-то расти вниз, то она сразу становится высотой до пола и расталкивает имевшуюся там ячейку в соседний столбец? Похоже на поведение колонок. Один вопрос: что делать, если начнёт расти не верхняя, а нижняя ячейка?