0

我正在使用 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>


发生了什么： 在此处输入图像描述

4

2 回答 2

1

可能的问题：

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

解决方案：

  1. .card使用 CSS 修复每个 div的高度。
  2. 仅在父容器中的所有图像都已加载后，才使用imagesLoaded()插件运行砌体。
于 2013-05-10T10:10:53.587 回答
0

只需要改变父母，

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

我认为这会做，如果不是请创建一个小提琴，并发布它..

于 2013-05-10T10:17:14.113 回答