如何使用CSS在Google Keep中制作像笔记一样的布局?

ren*_*dra 7 html css

我正在制作博客模板.在文章/帖子列表中,我想创建这样的布局,我不知道这个布局的名称,它就像Android版Google Keep中的笔记

我尝试使用带有css float:left的简单box div创建布局但结果是这样的,当框更改行时有一个留空格,下一个框在新行中水平开始

那么,有没有人知道如何在不使用两列div的情况下制作这样的布局?或者可能有任何javascript插件要解决?

小智 1

这是一个 javascript 解决方案,但是您是否考虑过使用同位素或 Masonry 之类的东西? http://isotope.metafizzy.co/