javascript - CSSまたはJavascriptDIVアライン

Question

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

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

http://ratecleveland.com/irregular_height_columns.jpg

しかし、私はこのようなものを手に入れようとしています。

http://ratecleveland.com/new.jpg

これがcssで実行できるかどうかのアイデア。または、いいえの場合、JavaScriptの例はありますか。

お手伝いありがとう

Answer 1

jQuery Masonry: 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 が適切な位置に収まります。列はコンテナーの左にフロートされるだけなので、列に同じクラスを与えることもできます。