堆叠div彼此相邻并相应地对齐下方的div

Question

我有这样的div：

<div class="parent">
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
</div>

我想在 3 列设计中对齐div，如下所示：

所以div的高度取决于里面的内容。

到目前为止我尝试了什么

我尝试添加display:inline-block方法和verticle-align:top;，但我的所有搜索结果都是这样的：

将它们正确堆叠在彼此之下的解决方案是什么，如 first 图片？类似于pinterest堆叠引脚盒的方式......

jsFiddle进行测试。

Answer 1

MetroFramework

宽度取决于您自己的造型结构。