Как заполнить пустые места выровненными элементами списка

Question

Я хочу выровнять элементы списка, чтобы не осталось пустого пространства без использования каких-либо плагинов JavaScript (например, масонство). Элементы выровнены по порядку и вставляются в список.

Пример: JSBin

HTML:

<ul class="example-list"> 
    <li>1</li> 
    <li class="three">3</li> 
    <li>2</li> 
</ul> 

CSS:

.example-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 120px; 
} 

.example-list li { 
    display: inline-block; 
    background: red; 
    padding: 20px; 
    margin: 5px; 
    color: #FFF; 
} 

.three { 
    height: 100px; 
} 

Из примера: 2 должны заполнить пустое пространство над ним.

Заранее спасибо.

Answer 1

Возможное решение

https://jsfiddle.net/43ofd9co/

Мы можем использовать CSS столбцы для создания эффекта ... проверить эту ссылку выше ... Я создал скрипку.

div{ 
      -moz-column-count: 2; 
      -moz-column-gap: 10px; 
      -webkit-column-count: 2; 
      -webkit-column-gap: 10px; 
      column-count: 2; 
      column-gap: 10px; 
      width: 480px; 
    } 

    div a{ 
      display: inline-block; 
      margin-bottom: 20px; 
      width: 100%; 
      border:2px solid #333;} 

    .height{height:100px;} 

HTML

<div> 
<a href="#">Your Content goes here...</a> 
<a href="#" class="height">Your Content goes here...</a> 
<a href="#">Your Content goes here...</a> 
<a href="#" class="height">Your Content goes here...</a> 
<a href="#" class="height">Your Content goes here...</a> 
<a href="#">Your Content goes here...</a> 
<a href="#" class="height">Your Content goes here...</a> 
<a href="#">Your Content goes here...</a> 
</div> 

Проверить это для справки: http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

NB: Это решение не работает в IE9 и ниже.

Answer 2

я могу предложить решение, которое используется Google +

Разделив содержание физически в нескольких столбцах. Например: https://plus.google.com/+Scobleizer

<div class="ona Fdb bsa" style="width:900px"> 
    <div class="Ypa jw Yc am"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="Ypa jw Yc am"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</div> 

Я не знаю, используют ли они JS для него. В любом случае это возможно без js.