删除不均匀高度div之间的空格

Question

我有一个小画廊，图片宽度相同但高度不同。我的问题是，只要第二行图像出现，它就会从前一行＆＃39;行的最高div的底部开始。 - 对不起我的涂装技巧：D

这就是我的div的样子：

<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>

如何使这些空白区域消失，以便我可以有一个平滑的布局？（我想保持不同的高度看起来:(）

Answer 1

嘿伙计们，首先感谢大家花些时间尝试帮助我！ ：d

我认为我找到了一个非常简单的解决方案，并不涉及js。

这是CSS：

.gallery{
    max-width: 1150px;
    width: 95%;
    margin: 75px auto 100px;
}

.gallery ul{
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    column-fill: balance;
}

.gallery ul li{
    display: block;
    margin-top: 10px;
    width: 100%;
}

.gallery ul li:nth-child(1){
   margin-top: 0;
}

.gallery ul li img{
    width: 100%;
    display: block;
}
@media screen and (max-width: 860px){
    .gallery{
        max-width: 700px;
    }
    .gallery ul{
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
    }
}

@media screen and (max-width: 450px){
    .gallery ul{
        -webkit-columns: 1;
        -moz-columns: 1;
        columns: 1;
    }
}

这是HTML文件（我使用PHP从数据库中获取数据，因为我将拇指和图像存储在数据库中）：

<div class="gallery">
    <?php if(!empty($images)): ?>
        <ul>
            <?php foreach($images as $image): ?>
               <li><img src="<?php echo $image['thumb']; ?>"></li>
            <?php endforeach; ?>
        </ul>
    <?php else: ?>
        <p>No images yet.</p>
    <?php endif; ?>
</div>

请注意，该无序列表的第一个孩子的边缘顶部设置为零，您必须注意这个原因，否则它会推动第二列或第三列（在我的情况下只有3个）列）这些10px从顶部开始，因此你将失去那个漂亮的顶部对齐。

有关多列的详情，请访问W3 multicol layout module