Как сделать это?

Question

[Blender0]

Подскажите как правильно сверстать эту картинку? А то получается вот это...

Comments

[Илья]

Через float. А ещё можно через родительский flex.

Answer 1

[Igor Ivanov]

Лучше использовать CSS flexbox (https://tproger.ru/translations/how-css-flexbox-works/ ; https://html5book.ru/css3-flexbox/). Просто нужно для себя понять, как он работает. Я набросал здесь не самый лучший вариант (форк от вашего скетча): https://codepen.io/theUniverseAsMatrix/full/rNeRMVV

Раньше использовали float. Полезно будет посмотреть, как это сделано в Bootstrap: https://getbootstrap.com/docs/4.1/layout/grid/ Возможно, вы уже смотрели, но все же.

Прим.: полупрозрачный белый абрис использован для демонстрации границ элемента.