CSS或Javascript DIV对齐

Question

I have website that where the php code generates all the products on the same page.

So far i get something like this.

http://ratecleveland.com/irregular_height_columns.jpg

however i am trying to get something like this.

http://ratecleveland.com/new.jpg

any idea if this can be done in css. or if no, is there a javascript examle.

thank you for the help

Answer 1

jQuery Masonry： http ： //masonry.desandro.com/

Answer 2

Here's a fiddle, use display:inline-block; with the ?display hack

http://jsfiddle.net/qW3TV/

No javascript is necessary.

Answer 3

Looks like all of the divs are the same width. Why not just create containing column divs around the ones you want to stack?

<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>

Float each column left and your interior div's, which appear to already have specified width and height, will fall into place. You can even give the columns the same class, since they will just be floated left containers.