电子邮件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>