CSS - 列重叠并做奇怪的事情

Question

我正在努力制作类似于pinrerest的社交媒体Feed。我正在遍历每个帖子并创建一个＆＃39; pin＆＃39;为了它。引脚内部将是帖子以及用户的数据。

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;

}

这会产生以下输出：

这很接近，但问题是它们是重叠的并且未正确对齐它们。

我需要它看起来像这样：

有人可以告诉我这里我做错了什么吗？在尝试制作300px的所有引脚之前，它有点工作，这就是我需要的。但即便如此，它也非常粗略。

Answer 1

如果框具有位置：静态或相对位置，则无法执行此操作。默认情况下，框将由某种类型的本机html网格放置。 但是从你的例子来看，我认为你的解决方案是jQuery库 Masonry

检查一下，跳过帮助 - 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;
}
}

每个300px迫使5列，这比我的屏幕可以处理的更多，我将它们更改为3并给包装器一个最小宽度，它的效果很好！