CSS3 - 像 pinterest 这样的砌体布局 - 列/框正在被拆分答案

【问题标题】：CSS3 - masonry layout like pinterest - columns / boxes are being splitCSS3 - 像 pinterest 这样的砌体布局 - 列/框正在被拆分
【发布时间】：2015-11-02 17:08:47
【问题描述】：

我有大约 6 个包含文本和图像的 div。它们的长度各不相同，但宽度相同。因此，我想展示我已经实现的 Pinterest。

但是，div 被拆分为多个列。我该如何阻止这种情况发生？我使用的 CSS 在图片下方。

.masonry {
     margin: 1.5em 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

.masonry .feedback-box{
    display: inline-block !important;
    width: 100% !important;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

【问题讨论】：

破碎是什么意思？
这就是 CSS 列的工作原理……如果你想要一个合适的砌体布局……你必须使用砌体类型的 JS 解决方案。
在图片中您可以看到它们是如何损坏的。 div 被分成多列。
没有 JQuery 就没有办法实现这一点吗？如果我使用 Jquery，最简单的解决方案是什么？

标签： css masonry

【解决方案1】：

将 overflow: hidden; 添加到您不希望在 Firefox 中跨列拆分的项目中，在 Chrome 中添加 display: inline-block。
比如：

.masonry .feedback-box{
    display: inline-block; /* Chrome */
    /*width: 100% !important; ?? */
    overflow: hidden; /* Firefox */
    margin-top: 1rem;
}
.masonry .feedback-box:first-child {
  margin-top: 0;
}

测试笔：http://codepen.io/anon/pen/ojeVmm?editors=010

仅在 Firefox 和 Chrome 上测试，未在 IE11 或 Safari 上测试。

可能与 How to prevent column break within an element?

重复

【讨论】：

很抱歉，并非在所有浏览器中都有效。我发现break-inside：避免；是我需要的。

【解决方案2】：

我需要使用 break-inside: Avoid; 见下文：

.masonry {
     margin: 1.5em 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

#client-feedbacks .feedback-box {
        display: inline-block !important;
        width: 100% !important;
        float:none !important;
        -webkit-column-break-inside: avoid; 
        page-break-inside: avoid; 
        break-inside: avoid; 
}

【讨论】：