Как организовать плавающие элементы бокса (с переменной высотой) в строки (с помощью JavaScript)

Question

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

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

Итак, я бы хотел сделать то же самое, но определить строки и соответственно установить высоту.Однако у меня возникли проблемы с этим, поскольку element.getComputedStyle('left') возвращает undefined для плавающих элементов.

Другая функция, которую я могу использовать (используя YUI, но это не должно иметь значения)?Или полностью использовать другой подход?

Answer 1

Вы можете использовать это чистое решение CSS:

HTML:

<div class="row">
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
</div>    

<div class="row">
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
</div>

CSS

.row div {
    display:table-cell;
    width:25%;
}

Ссылка на jsFiddle: http://jsfiddle.net/innerurge1/Ys5Kw/