html - Div Gallery - 尝试将 div 显示与 "left"对齐，并允许响应高度

Question

我正在尝试创建博客文章显示网格。我的fiddle是here这些 div 目前位于页面中间，这很好；但是，我想:

1. 将div 的对齐方式更改为向左对齐，而不是居中对齐；因此，在生成每个帖子时，都是按照自然阅读顺序完成的。
2. 使 div 的高度响应。我的意思是，单个 div 的高度已经响应；但是，下一行 div 将根据其上一行中最长的单个 div 的底部对齐。我希望每个 div 填充其上方的 div 未占用的空间，如下图所示

目前，我的代码呈现如下: 关于我如何实现这一目标的任何想法？谢谢你!

Answer 1

你可以使用 this现代 CSS 方法(不适用于旧浏览器)

 column-break-inside: avoid; // for each content "widget"

或

您可以使用一些 javascript 库来实现此目的:

• > bricklayer.js
• > Masonry