CSS float: как сформировать второй ряд на основе самого высокого DIV?

Question

Я использую float для размещения DIV рядом, но проблема возникает, когда избыточные DIV образуют вторую строку (строку).Следующий ряд формируется на основе высоты последнего DIV (не самого высокого DIV).Таким образом формируется неполная строка.

См. Пример на http://jsfiddle.net/etrader/6qZnk/

Здесь я хочу разместить фиолетовые и зеленые DIVs в линии.Но фиолетовый DIV образует неполный ряд, и, таким образом, зеленый DIV переходит на другую строку.Я хочу сформировать следующую строку на основе высоты самого высокого DIV (то есть синего DIV).

ПРИМЕЧАНИЕ: высота ящиков не задана заранее и устанавливается динамически.

Answer 1

Используйте display:inline-block вместо float:left

См. Пример

Answer 2

А как насчет использования inline-blocks вместо числа с плавающей запятой?

http://jsfiddle.net/6qZnk/1/

К сожалению, если ваши блоки должны касаться друг друга горизонтально, встроенный блок - не лучшее решение