CSS3多列

我正在使用CSS创建多个列，以给Pinterest界面提供类似的外观（例如，框中的列，但整齐地堆叠在另一个下面）

以下是我使用的代码：

#feed-post-home .feed {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

#feed-post-home .feed > section {
    margin-bottom: 10px;
}

#feed-post-home .feed > section > .content {
    background: #d4d4d4;
    padding: 10px;
}

如下图所示，这几乎可以完美实现：

但仔细观察，你可以看到一些盒子被一分为二，我在下一张图中突出了我的问题，橙色矩形显示了哪些盒子应该是一个，而不是一分为二：

---

有人知道我可以在CSS中添加什么（如果有的话）来防止元素以这种方式拆分吗？我宁愿它们作为一个整体堆叠在一起，即使最终结果看起来有点不平衡，如复制的帖子所示，您也需要执行以下操作：

#feed-post-home .feed > section {
    margin-bottom: 10px;
    -webkit-column-break-inside: avoid;   /* Chrome webkit browsers */
    page-break-inside: avoid;             /* FF */
    break-inside: avoid-column;           /* Convention */ 
}

您还可以将其显示设置为

内联块

，以防止中断

#feed-post-home .feed > section {
    margin-bottom: 10px;
    display: inline-block;
}

---

标记是什么样子的？可能重复的