Email CSS - 高さの異なるアイテムのグリッド。 （JSなし、CSS3なしなど）

Question

私はいくつかのテキストを持っていますが、項目の数は可変です（それぞれ可変の高さです）。

幸運にも私は項目の順序を気にしません。私が気にしているのは、大きなギャップがないということです。

何がいけないことはこれです：

私が欲しいのはこれです：

重要：

これは、電子メールのためです！だから、私はJSでこれを行うことができることを知っています、私はMasonry.jsについて知っていますが、それは今私を助けません。私はほとんどの電子メールプロバイダ（完全なカバレッジを心配していない）で動作する必要があります。だから私は電子メールのCSSの限られたサポートと思う、私はほとんどテーブルに限られています。どのようにこの外観を達成するための任意のアイデア？

Answer 1

@ nocturns2と同様に、テーブルを2列使用し、ブロックごとにdivを使用してこれを実現することができます。あなたが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>