0

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

我尝试使用列计数，但 div 首先在左列中打印一个在另一个之后，然后（当第一个填充时）在右列上打印。在这种情况下，div 正确填充了它们之间的空间，但顺序错误。

然后我尝试使用带有响应式网格设计的引导程序或纯 css，但我在同一列中的 div 之间获得了空白空间（只有一个 div 的高度比最近的高）。

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

.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

4

1 回答 1

2

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

如果您需要，请参阅Masonry ，一个“级联网格布局库”。

于 2013-10-27T05:53:03.730 回答