Как расположить блоки в диве во всю ширину в каждой строке?

Question

[Андрей]

Здравствуйте, столкнулся с задачей, нужно сделать теги которые размещены в определённом блоке с заданной шириной. Я пытался сделать это на .css но немного не задалось, так как нужно разместить блоки по всей ширине блока. То есть, чтобы получилась кирпичная кладка, без явных пробелов.
Я решил использовать JQuery, код будет в этой песочнице https://jsfiddle.net/Loll_Lark/4vbcj5dp/15/, не хотелось бы прибегать к Masonry, возможно как-то можно сделать это на чисто JQuery. Заранее за помощь спасибо!

Comments

[Ankhena]

https://jsfiddle.net/21mkz8t3/

[Андрей]

Ankhena, Спасибо большое, да это можно использовать, но нужно чтобы ширина была еще и по тексту, чтобы блоки не были разной ширины.

[Ankhena]

Stop_Loll, в смысле по тексту и не разной ширины?
Поясните, пожалуйста, как сочетаются эти два высказывания?

[Андрей]

Ankhena, Ширина блока должна быть равной ширине (длине) текста. То есть блок не должен быть дальше текста, как в вашем примере, самый последний блок или другие блоки. Пример masonry js.

[Ankhena]

Stop_Loll, так, хорошо. Что делать тогда с "чтобы блоки не были разной ширины."?
Если ширина будет по тексту, то они будут разной ширины. Если одинаковой, то не по тексту.

Ну и пустое оставшееся место в строке куда нужно деть?

[Андрей]

Ankhena, Вот по этому я решил попробовать сделать это на jquery, но спасибо за вашу помощь.

[Ankhena]

Stop_Loll,

Пример masonry js.

У masonry не ровный нижний край. В вашем случае правый.
И такой результат дает обычный флекс.

Но пока ваши желания противоречат друг другу.

Answer 1

[キム ファイブプラス]

Я так понимаю тебе нужен https://packery.metafizzy.co

Comments

[Андрей]

Да, но именно чтобы ширина была автоматической.

[キム ファイブプラス]

ну так она и будет автоматическая. контейнер без паддингов сделай и текст nowrap

Answer 2

[Антон Шаманов]

https://masonry.desandro.com/

Comments

[Андрей]

Я уже писал насчёт masonry, эта библиотека не работает с шириной.

[Антон Шаманов]

Stop_Loll, не замечал проблем, скорее всего настроил как-то криво https://masonry.desandro.com/options.html#horizont...