Раскладка флюида CSS: «сложены» div с разной высотой

Question

Я пытаюсь выяснить, возможно ли создать макет CSS, где divs с float: left не создадут новый «похожий на строку» макет, но будут действительно текучими.

Чтобы быть более конкретным, вот что у меня сейчас:

Все блоки div с float: left стиля, определенных полях и нефиксированной атрибут высоты. Как видите, каждый достаточно высокий блок формирует «линию» или «строку» с одинаковой высотой. То, что я пытаюсь достичь, - сделать все элементы div подчиняться только их собственному margin стилю, а не создавать строки с одинаковой высотой.

Итак, вопрос в том, возможно ли, и если да, то как это можно достичь?

HTML (некоторые блоки опущены):

<div id="blocks_wrapper"> 
<div class="strblock rouded_3px infobox"> 
    <div class="dElement"> 
     <div class="d_option">Web</div> 
     <div class="d_value"><a href="" rel="nofollow" target="_blank"></a></div> 
    </div> 
</div> 
<div class="strblock rouded_3px infobox"> 
    <div class="dElement"> 
     <div class="d_option">Phone</div> 
     <div class="d_value"></div> 
    </div> 
</div> 
<div class="strblock rouded_3px infobox"> 
    <div class="dElement"> 
     <div class="d_option">Thu—Fri</div> 
     <div class="d_value">11:00—19:00</div> 
    </div> 
</div> 
<div class="strblock rouded_3px infobox"> 
    <div class="dElement"> 
     <div class="d_option">Pricing</div> 
     <div class="d_value">40 USD</div> 
    </div> 
</div> 
<div class="strblock rouded_3px infobox"> 
    <div class="dElement"> 
     <div class="d_option">Address</div> 
     <div class="d_value">0.2km from Historic U.S. 66, Seligman, AZ 86337, USA</div> 
    </div> 
</div> 
<div class="strblock rouded_3px infobox"> 
    <div class="dElement"> 
     <div class="d_option">Coordinates</div> 
     <div class="d_value"> 
      35.52890, -113.23200<br> 
      N35°31'44", W113°13'55" 
     </div> 
    </div> 
</div> 

<div class="clear"></div> 
</div> 

CSS:

#blocks_wrapper .strblock { float: left; margin-bottom: 3px; overflow: hidden; } 
#blocks_wrapper .infobox { width: 19%; padding: 3px; } 
#blocks_wrapper .infobox .dElement .d_option { display: inline-block; width: 90px; overflow: hidden; font-weight: bold; } 
#blocks_wrapper .infobox .dElement .d_value { display: inline-block; width: 155px; vertical-align: top; } 

Answer 1

Я знаю, что уже поздно, но, возможно, это поможет кому-то. http://masonry.desandro.com