Divs跑到另一个底部

Question

我正在使用jQuery Masonry而且div正在互相流动。有帮助吗？

的 CSS：

div.cards div.card{
    width: 310px;
    margin: 11px;
    float: left;
    background: white;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2x;
}

div.cards div.card img{
    max-width: 310px;
    min-width: 310px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

div.cards div.card div.data{
    padding: 10px;
    width: 290px;
}

div.cards div.card div.data div.title{
    font-size: 17px;
    color: #2f3132;
    font-weight: 700;
}

div.cards div.card div.data div.information{
    font-size: 13px;
    color:#a0a7ab;
    overflow: auto;
    padding-top: 5px;
}

div.cards div.card div.data div.information span.username{
    float: left;
    overflow: auto;
}

div.cards div.card div.data div.information span.date{
    float: right;
    overflow: auto;
}

HTML / PHP：

<div class="card">
    <img src="<?=$url; ?>" />
        <div class="data">
            <div class="title">
                <a href="http://reddit.com<?=$reddit_post_premalink; ?>" target="_blank"><?php if($reddit_post_over18 == 1){ ?><span class="nsfw">[NSFW] </span><?php } ?><?=$reddit_post_title; ?></a>
            </div>
            <div class="information">
                <span class="username"><?=$reddit_post_author; ?></span>
                <span class="date"><?=post_date($reddit_post_created); ?></span>
            </div>
        </div>
    </div>

发生了什么：

Answer 1

可能的问题：

在加载所有图像之前运行砌体，导致每张卡的高度计算错误。

<强>解决方案：

1. 使用CSS修复每个.card div的高度。
2. 仅在父容器中的所有图片都已加载后才使用imagesLoaded()插件运行砌体。

Answer 2

只需要更改父级，

div.cards div.card{

width: 310px;
margin: 11px;
float: left;
top:0;
bottom:10px;
min-height:310px;
background: white;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2x;
}

你也需要纠正..

div.cards div.card img{
max-width: 310px;
min-width: 310px;
min-height: 310px; // there was no height...

我认为这样做，如果不是，请创建一个小提琴，然后张贴..