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> 

무슨 일 :

01 23,516,

Answer 1

가능한 문제 : 모든 이미지는 각 카드에 대한 잘못 계산 높이의 결과로,로드되기 전에는

벽돌이 실행됩니다.

해결책 :

1. 각 .card 사업부 사용하여 CSS의 높이를 수정합니다.
2. 부모 컨테이너의 모든 이미지가로드 된 후에 만 ​​벽돌을 실행하려면 imagesLoaded() 플러그인을 사용하십시오.

Answer 2

그냥

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

내가 바이올린을 작성하시기 바랍니다하지 않을 경우이, 할 생각 ..

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; 
} 

또한 당신이 수정해야, 부모를 변경해야하고, 포스트 그것 ..