CSSまたはJavascript DIVの整列

Question

私は、PHPコードが同じページのすべての製品を生成するウェブサイトを持っています。

これまでのところ、私はこれのようなものを手に入れました。

http://ratecleveland.com/irregular_height_columns.jpg

しかし、私はこのような何かを取得しようとしています。

http://ratecleveland.com/new.jpg

これはCSSで行うことができるかどうか任意のアイデア。もしそうでなければ、javascriptのexamleがあります。

は助け

Answer 1

jQueryの石工をありがとう：http://masonry.desandro.com/

Answer 2

はここでフィドル、使用ディスプレイです：インラインブロック; ？ディスプレイは

http://jsfiddle.net/qW3TV/

をハックしませジャバスクリプトは必要ありません。

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の、場所に分類されます。列を左のコンテナにフローティングさせるだけで、列に同じクラスを与えることさえできます。