电子邮件CSS - 具有不同高度的项目网格。 （没有JS，没有CSS3等）

Question

我有一些文字，然后是一些项目（可变数量的项目，每个项目都是可变高度。）

幸运的是我不关心物品的顺序。我关心的是，它没有太大的差距。

我不想要的是：

我想要的是：

重要的：

这是发电子邮件!!所以，拜托，我知道我可以用JS做到这一点，我知道Masonry.js，但那对我现在没有帮助。我需要它适用于大多数电子邮件提供商（不担心完全覆盖）。所以我认为在电子邮件中CSS的支持有限，我主要限于表格。知道如何实现这种外观吗？

Answer 1

就像@ nocturns2所说，可以使用表格，2列并为每个块使用div来实现这一点。

.size1 {
  height: 100px;
}

.size2 {
  height: 150px; 
}

.size3 {
  height: 75px; 
}

div {
  background: red;
  width: 100px;
  margin: 2px;
}

td {
  vertical-align: top; 
}

<table>
  <tr>
    <td>
      <div class="size1"></div>
      <div class="size1"></div>
      <div class="size2"></div>
      <div class="size3"></div>
      <div class="size1"></div>
    </td>
    <td>
      <div class="size2"></div>
      <div class="size2"></div>
      <div class="size3"></div>
      <div class="size1"></div>      
    </td>
  </tr>
</table>