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;
}