Перепад высот в многоцветном списке

Question

Я создал список из нескольких столбцов.В каждом списке есть div внутри.Так как высота этого добавленного div, пустое пространство появляется между этой и следующей строкой.Можно ли каким-либо образом расширить эту строку, чтобы заполнить пробел или вызвать следующую строку.

<ul>
    <li>1</li>
    <li>2</li>
    <li>3
        <div class="exp">abc abc</div></li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

Проблема, объясненная здесь http://jsfiddle.net/DPRtF/18/ (см. От 3 до 6)

Answer 1

Если я понимаю, что вы ищете, я думаю, вам нужен javascript.

То, что я сделал здесь, - это написание небольшого сценария, который проходит по всем ячейкам, находит самый большой и затем добавляет эту высоту ко всем ячейкам. Таким образом, пустое пространство исчезает.

Код нуждается в некоторой очистке, но это доказывает смысл.

http://jsfiddle.net/E2K8c/

var highestBox = jQuery('li:first');
jQuery('li').each(function() {
    if (jQuery(this).height() > highestBox.height())
        highestBox = jQuery(this);
});
jQuery('li').height(highestBox.height());

Answer 2

jQuery Masonry может быть тем, что вы хотите, тогда: http://masonry.desandro.com/ Он решает проблему с плавающей точкой - не делаю баланс - высоту.