CSS3 - 类似 pinterest 的砌体布局 - 列/框正在拆分

Question

我有大约 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;
    }
}

Answer 1

将 overflow: hidden; 添加到您不想在 Firefox 中跨列拆分的项目和 display: inline-block 在 Chrome 就像你一样。
类似于：

.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?

重复

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

CSS3 - 类似 pinterest 的砌体布局 - 列/框正在拆分

CSS3 - masonry layout like pinterest - columns / boxes are being split

css

masonry