javascript - 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; 使用 ?display hack

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 似乎已经具有指定的宽度和高度，将落入适当的位置。你甚至可以给列赋予相同的类，因为它们只是浮动的左容器。