Question

我有网站，php代码在同一页面上生成所有产品。

到目前为止，我得到了类似的东西。

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;使用？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（看起来已经具有指定的宽度和高度）将落入到位。你甚至可以给列提供相同的类，因为它们只是浮动左容器。

CSS或Javascript DIV对齐

3 个答案: