Как заставить мой диапазон иметь определенную высоту?

Question

Я хочу отображать «карты» в строке (например, для четырех карт на каждой строке). Каждая карта - div, которая содержит заголовок (a span). Моя основная проблема заключается в том, что высота заголовка изменится в отношении количества строк, необходимых для отображения всего заголовка.

Итак, если у меня есть заголовок, которому нужно отобразить 2 строки, карты, которые содержат себя, будут сдвинуты по сравнению с теми, где заголовок может отображаться только в одной строке.

В таком случае, я получаю что-то вроде этого:

  +-----+ 
+-----+ | ABC | +-----+ 
| ABC | | DEF | | ABC | 
+-----+ +-----+ +-----+ 
|  | |  | |  | 
|  | +-----+ |  | 
+-----+   +-----+ 

Вот демо: http://plnkr.co/edit/eO9MwDyhFQg3BriMjikJ?p=preview

Как я могу решить, что, то есть я хочу, чтобы все карты имеют одинаковую высоту, и, конечно, идеально выровнены.

Благодаря

Answer 1

Просто добавьте vertical-align на название класса для пролетов:

.title { 
    vertical-align:top; 
} 

По умолчанию является baseline, что делает изменение диапазона выравнивания на основе длины другого базового текста inline-block элементов.

_{Вы можете добавить это к xxx класса и работает}

Проверить это демо http://plnkr.co/edit/X8vmBasqq3lZslMylSjI?p=preview

Answer 2

это то, что вы имеете в виду? я заменил дисплей встроенный блок с поплавком оставил http://plnkr.co/edit/xvP2ElSyEV1oXHSkV4Fb?p=preview