How to lay out inline blocks with height alignment within each line?

Question

css

• There is some predetermined number of blocks.
• They are placed from left to right, one after the other, and when they reach the edge of the container, they wrap to the next line, and so on.
• The width of the blocks is determined by the content, but not less than a third of the container (you can try to ignore this requirement to simplify the task).
• The height of the blocks is the smallest possible if two requirements are met: it is not less than the content and is equal for all blocks within each line (however, it can be different in different lines).

Is it possible to do this without a table (and generally an explicit split in the HTML code into lines) and Javascript? I understand that it isn't, but there's one thing that makes it easier: the solution is only for Firefox, so you can freely use the CSS3 it supports. Flexible Box won't help?

As a last resort, I'm interested in a solution using CSS3 modules, which are not even implemented in Firefox and in general in any browser.

Answer 1

Have a look at Habr://Crossbrowser inline-block

Answer 2

Sergey Chikuenok has a good article on this topic:
chikuyonok.ru/2011/04/inline-vertical-align/
Example:
chikuyonok.ru/u/inline-va/

Answer 3

Searched for a long time, unsubscribe for those who know the width.
The simplest option is in the form of a regular list. where ul is the container, li are the child elements.
ps may not work when using bootstrap.