CSS或Javascript的DIV对齐

Question

我有网站，在哪里的PHP代码生成在同一页上的所有产品。

到目前为止，我得到了这样的东西。

http://ratecleveland.com/irregular_height_columns.jpg

但是我试图得到这样的事情。

http://ratecleveland.com/new.jpg

这是否可以在CSS做任何想法。或者如果没有，是否有JavaScript检查。

感谢你的帮助

Answer 1

jQuery的砌体：http://masonry.desandro.com/

Answer 2

这里有一个小提琴，使用display：inline-block的;与？显示黑客

http://jsfiddle.net/qW3TV/

没有JavaScript是必要的。

Answer 3

看起来像所有的div是相同的宽度。为什么不只是创建包含你想要堆栈的列的div呢？

<div class="col1"> 
    <div class="a"></div> 
    <div class="e"></div> 
    <div class="i"></div> 
</div> 
<div class="col2"> 
    <div class="b"></div> 
    <div class="f"></div> 
    <div class="k"></div> 
</div> 
<div class="col3"> 
    <div class="c"></div> 
    <div class="g"></div> 
    <div class="l"></div> 
</div> 
<div class="col4"> 
    <div class="d"></div> 
    <div class="h"></div> 
    <div class="m"></div> 
</div> 

将每列都浮起来，而您的内部div似乎已经具有指定的宽度和高度，将落入适当的位置。你甚至可以把这些列放在同一个类中，因为它们只会被浮动到左边的容器中。