css masonry - 不正确的项目包装

Question

我正在尝试实现一个“砌体”网格......好吧，使用css column-count来实现这一目标。

这是我正在遵循的教程： http://w3bits.com/css-masonry/

我发现第一列中的最后一项是“换行”。 它被截断，一些出现在列的底部，而其余部分出现在第二个面板的顶部。

我该如何防止这种情况？

以下是一些代码：

.masonry {
  column-count: 2;
  column-gap: 0;
}

<div className="masonry">
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '285px', backgroundColor: 'red', margin: '0 0 1em'}}></div>
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '196px', backgroundColor: 'green', margin: '0 0 1em'}}></div>
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '183px', backgroundColor: 'blue', margin: '0 0 1em'}}></div>
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '234px', backgroundColor: 'orange', margin: '0 0 1em'}}></div>
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '123px', backgroundColor: 'yellow', margin: '0 0 1em'}}></div>
</div>