html - CSS 流体布局 : "stacked" div with different heights

Question

我正在尝试弄清楚是否有可能创建一个 CSS 布局，其中带有 float: left 属性的 div 不会创建一个新的“行”式布局，而是非常流畅。

更具体地说，这是我现在拥有的:

所有 block 都是div，具有float: left 样式、一定的边距和不固定的高度属性。如您所见，每个足够高的 block 都形成一条具有相同高度的“线”或“行”。我想要实现的是——让所有 div 元素只遵循它们自己的 margin 样式，而不是创建具有相似高度的行。

所以问题是这是否可能，如果可能，那么如何实现？

HTML(省略了一些 block ):

<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