Вертикальный грид с сортировкой?

Question

[Msklf]

Все никак не получается решить проблему.

Как сделать, чтобы "left_side" увеличивался вместе с "right_side", если в нем добавляется строка текста?

А также как сделать, чтобы в столбец шло не более 4 ячеек, или же после определенной высоты, был перенос направо?

И на последок, после добавления "float: left" sortable перестал правильно работать...

Помошите с решением, во фронтэнде не силен, но свалили задачу вместе с бэком.

https://codepen.io/anon/pen/veWZKr/

Comments

[gleendo]

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

Answer 1

[Aleksei Nemov]

Если правильно понял, так
https://codepen.io/newkamikaze/pen/veWZwP

Извините, но код у вас жутковатый. Зачем UL, если внутри нет LI? Ну и от Float лучше отказаться, в данном случае оно вроде как не оправдано.

Comments

[Msklf]

Насчет кода да, извините, Ul вообще не сюда. Начинал с grid, получилось хорошо, но когда нужно было два дива, чтобы примыкали и растягивались от второго, начал все подряд пробовать и получилась каша. И вот после каши сбился грид, и еще вопрос не пойму, как чтобы в одном столбце было ограничение по высоте, вот вертикальный счет идет, и упирается в зону и продолжает во втором столбце и т.д. ? И как тут вот правую картинку редактирования поднять примерно справа пикселей 7 отступ и вверх 10, а то она прилипла к краю блока ?

[Msklf]

Спасибо большое за ваш ответ. iamevg_ развернул решение с оставшимися вопросами, так что буду адаптировать ваши варианты под свое.

[gleendo]

Aleksei Nemov Только у меня все поехало?

[Msklf]

iamevg_, Он там class="panel" после 4-го блока не ставил

Answer 2

[gleendo]

Demo

Comments

[Msklf]

Спасибо большое, изучу ваш пример и адаптирую к своему.

[Msklf]

iamevg_ Только обратил внимание, что вы используете новый wrapper для каждого вертикального блока, а как использовать один блок, чтобы все внутренние сортировались по вертикали ?

[Msklf]

iamevg_ Все, разобрался, все что надо сделал, все ок.