Как выравнить блоки ряда?

Question

[wagwandude]

Всем привет.

Битый час пытаюсь разобраться, как выровнять блоки по высоте именно в том ряду, где один из них (либо более) имеет больше текста, нежели другие.

Читал статьи, связанные с flex, либо display: table Но это все не то, т.к. у меня несколько рядов.

Собственно, сама проблема:


Если есть какой-нибудь способ на CSS - буду премного благодарен!

Заранее спасибо за отклик!

Answer 1

[Сергей Горячев]

Вариант 1) Для блоков

display: inline-block;
vertical-aligm: top;

Вариант 2) Для родителя

display: flex;
dlex-direction: row;
flex-wrap: wrap;

Читал статьи, связанные с flex. Но это все не то, т.к. у меня несколько рядов.

Эта проблема как раз и решается через flex-wrap: wrap;.

Comments

[wagwandude]

flex-wrap: wrap;
Не знал, буду иметь ввиду, спасибо!

При display: inline-block; появляется какой-то отступ, от него можно как-нибудь избавиться?

P.S.: Насколько приемлемый вариант с flex на данный момент? Я ориентируюсь на современные браузеры, но не хочется оставлять позади IE последних версий.

[Сергей Горячев]

wagwandude:

При display: inline-block; появляется какой-то отступ, от него можно как-нибудь избавиться?

Можно, отрицательным маргином, сдвигом блоков, calc'ом, перенести блоки в одну строку, вариантов много.

Насколько приемлемый вариант с flex на данный момент? Я ориентируюсь на современные браузеры, но не хочется оставлять позади IE последних версий.

caniuse.com/#feat=flexbox

flex-wrap: wrap;
Не знал, буду иметь ввиду, спасибо!

flexbox.help

[Сергей delphinpro]

wagwandude:

P.S.: Насколько приемлемый вариант с flex на данный момент? Я ориентируюсь на современные браузеры, но не хочется оставлять позади IE последних версий.

самому посмотреть слабо caniuse.com/#feat=flexbox ?)