jquery - Divs running into the bottom of other each other -
i using jquery masonry , div's flowing 1 another. help?
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>
what's happening: 
possible problem:
masonry runs before images have been loaded, resulting in miscalculated height each card.
solution:
- fix height of each
.carddiv using css. - use imagesloaded() plugin run masonry after images in parent container has loaded.
Comments
Post a Comment