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似乎已經具有指定的寬度和高度，將落入適當的位置。你甚至可以把這些列放在同一個類中，因爲它們只會被浮動到左邊的容器中。