CSS - Столбцы перекрываются и делают странные вещи

Question

Я пытаюсь сделать канал социальных сетей похожим на то, как pinterest делает theres. Я повторяю каждую запись и создаю для нее «булавку». Внутри булавки будет сообщение, а также данные пользователя.

HTML:

<div id="wrapper"> 
<div id="columns"> 
    <?php foreach($posts as $post) {?> 
    <div class="pin"> 
     <div class="userinfo"> 
      <img src="<?php echo base_url();?>img/profilepictures/<?php echo $profilepicture . '?' . $servertime ?>" width="50px" height="50px" id="post_userpic">       
      <?php echo $this->model_users->getUserData('username', 3); ?> 
     </div> 
     <p> 
      <?php echo $post->post; ?> 
     </p> 
    </div>    
    <?php } ?> 
</div> 

CSS:

body { 
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ; 
} 

#wrapper { 
width: 600px; 
max-width: 1100px; 
min-width: 800px; 
margin: 50px auto; 
} 

#columns { 
-webkit-column-count: 3; 
-webkit-column-gap: 10px; 
-webkit-column-fill: auto; 
-moz-column-count: 3; 
-moz-column-gap: 10px; 
-moz-column-fill: auto; 
column-count: 3; 
column-gap: 15px; 
column-fill: auto; 
} 

.pin { 
width: 300px; 
display: inline-block; 
background: #FEFEFE; 
border: 2px solid #FAFAFA; 
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); 
margin: 0 2px 15px; 
-webkit-column-break-inside: avoid; 
-moz-column-break-inside: avoid; 
column-break-inside: avoid; 
padding: 15px; 
padding-bottom: 5px; 
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); 
opacity: 1; 

-webkit-transition: all .2s ease; 
-moz-transition: all .2s ease; 
-o-transition: all .2s ease; 
transition: all .2s ease; 
} 

.pin img { 

border-bottom: 1px solid #ccc; 
padding-bottom: 15px; 
margin-bottom: 5px; 
} 

.pin p { 
font: 12px/18px Arial, sans-serif; 
color: #333; 
margin: 0; 
} 

@media (min-width: 960px) { 
#columns { 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
} 
} 

@media (min-width: 1100px) { 
#columns { 
    -webkit-column-count: 5; 
    -moz-column-count: 5; 
    column-count: 5; 
} 
} 

#columns:hover .pin:not(:hover) { 
opacity: 0.4; 
} 

.userinfo { 
border: 1px blue solid; 

} 

Это производит следующий вывод:

Thi s близко, но проблема в том, что они перекрываются и не выравнивают их должным образом.

мне нужно, чтобы выглядеть следующим образом:

Может кто-то пожалуйста, скажите мне, что я делаю неправильно здесь? Это было похоже на работу, прежде чем я попытался сделать все контакты размером 300 пикселей, и это то, что мне нужно. Но даже тогда это было очень отрывочно.

Answer 1

Вы не можете это сделать, если в ячейках есть позиция: статическая или относительная. По умолчанию окна будут размещаться с помощью какой-либо родной html-сетки. Но из вашего примера, я думаю, что ваше решение является библиотека JQuery Кладка

Проверьте это, Hoppe помогает - http://desandro.github.io/masonry/

Answer 2

я понял, что проблема была в

@media (min-width: 960px) { 
#columns { 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
} 
} 

@media (min-width: 1100px) { 
#columns { 
    -webkit-column-count: 5; 
    -moz-column-count: 5; 
    column-count: 5; 
} 
} 

Это заставлял 5 столбцов по 300 пикселей каждый, что больше, чем мой экран может обрабатывать, я изменил их на 3 и дал минимальную ширину для обертки, и он отлично работает!