css - CSS3 多列

Question

我正在使用 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 中以防止元素以这种方式被拆分？我宁愿它们只是作为整体元素堆叠在一起，即使最终结果看起来有点不平衡

Answer 1

如重复帖子所示，您需要执行以下操作：

#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 */ 
}

您还可以设置它们的显示inline-block以防止中断。

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