css - 像 google plus 这样的两列布局

Question

今天我尝试重新实现与 google plus post history 相同的两列布局。

我尝试使用 column-count，但 div 首先在左列中一个接一个地打印，然后(当第一个填充时)在右列中打印。在这种情况下，div 正确填充了它们之间的空间，但顺序错误。

然后我尝试使用 bootstrap 或纯 css，采用响应式网格设计，但我在同一列的 div 之间获得了空白空间(只有一个 div 的高度比最近的高)。

我需要实现在 google plus 上创建的相同系统 :(感谢您提出任何 future 的建议，祝您有美好的一天。

.multicols {
    padding:0;
    column-width: 50%;
    column-count: 2;
    -webkit-column-width:50%;
    -webkit-column-count: 2;
    -moz-column-width:50%;
    -moz-column-count: 2;
    -ms-column-width:50%;
    -ms-column-count: 2;
    -o-column-width:50%;
    -o-column-count: 2;

    column-gap: 0;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    -ms-column-gap: 0;
    -o-column-gap: 0;
    vertical-align:text-top;
}

.multicols .amulticol {
    display: inline-block;
    margin:0;
    min-height: 100px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -ms-column-break-before: avoid;
    -o-column-break-before: avoid;
}

此处无效的代码:jsfiddle.net/PsL8H

Answer 1

我看到您尝试使用 bootstrap 和纯 css 来执行此操作，但我相信您需要 Javascript。

参见 Masonry ，一个“级联网格布局库”，如果它是您需要的。