如何在列中显示div-流体设计

Question

 <div id="foo">
    <div class="bar">
       there are very many divs like this  
    </div>
 </div>

CSS

#foo{
    margin: 10px auto;
    min-height: 400px;
    min-width: 800px;
}
.bar{
    float: left;
    text-align: left;
    width: 450px;
    min-height: 280px;
}

div #foo可以具有800px到100％的包含媒体的可变宽度，并且div .bar可以具有可变高度。在宽屏显示器上，我想要三列.bar div，但由于它们是可变高度，它们就像它们向上滑动到div的左边，因此左边的那些在它们上面有空格。如何让它们向上浮动。我希望我有道理。

Answer 1

我建议你看一下这篇文章：Does anyone know how Pinterest.com's layout works?以及这些jQuery插件：http://masonry.desandro.com/和http://www.wookmark.com/jquery-plugin。

CSS3解决方案：http://cssdeck.com/labs/css-only-pinterest-style-columns-layout