为什么我的div不能与顶部对齐？

Question

我试图在一个接一个，一个一个之后拉出帖子并展示它们。它完美地展示了一个一个，但它没有显示一个一个。这是图片：

你可以看到第1和第4篇之间存在一些差距。我不想要那个差距。我试过了vertical-align:top，但它没有用。如果我尝试应用float:left，它的工作原理如下：

我试图在不同的网站上查找，包括Stack Overflow，但没有一个解决方案适合我。

＆＃13;

＆＃13;

.social-links {
  width:350px; display:inline-block; vertical-align:top; margin:5px;
}

＆＃13;

<div class="social-links" >  
  <iframe some-links-based-on-posts></iframe>
</div>

＆＃13;

＆＃13;

＆＃13;

这是链接，以便您可以更好地理解：ebosscanada.com/all-social-links/

Answer 1

可能的解决方案是引入“列数”

更改以下内容：

.td-page-content {
    padding-bottom: 26px;
}

要：

.td-page-content {
    padding-bottom: 26px;
    -webkit-column-count: 3;
    column-count: 3;
}

Answer 2

在您的网站上为.social-links容器设置此样式：

.td-page-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vw;
}