Можно ли использовать неиспользуемое пространство на плавающих элементах?

Question

У меня есть простой пример: http://jsfiddle.net/9BCwL/2/

Это о несортированном списке, отображаемом в двух столбцах. Чтобы упорядочить элементы, атрибут «float: left;» используется. В моем примере вы можете видеть, что второй элемент получил разрыв строки, если он слишком длинный. Третий элемент расположен на левой стороне, это правильно. Но из-за разрыва строки во втором элементе есть gab между третьим и первым элементом. Можно ли использовать это пространство (чтобы переместить третий элемент вверх) с помощью CSS? Может быть, есть атрибут CSS, который я не знаю. Заранее спасибо! :)

Greetz Sy

Код:

HTML:

<div class="my-list"> 
    <ul> 
     <li><span>Element 1</span></li> 
     <li><span>This is an extra loooooooong, looooooong Element 2</span></li> 
     <li><span>Element 3</span></li> 
     <li><span>Element 4</span></li> 
     <li><span>Element 5</span></li> 
    </ul> 
</div> 

CSS:

.my-list { 
    width: 550px; 
    border: 1px solid black; 
} 
.my-list ul { 
    overflow: hidden; 
    padding: 5px 0 0 14px; 
    margin-top: 10px; 
    border-top: 1px solid #D9D9D9; 
} 
    .my-list ul li { 
     float: left; 
     padding: 0 0 5px; 
     line-height: 20px; 
     list-style: none; 
     width: 240px; 
    border: 1px dotted red; 
    } 

Answer 1

вы можете использовать для этого плагин записи в Jquery примере это один jquery masonry это то, что вы ищете. Я не уверен, но для этого недостаточно чистого CSS.