HTML電子郵件 - 垂直對齊內容

Question

我是這個論壇的新手，如果這個問題已經在其他地方解決了，我很抱歉，我找不到任何有用的東西。

我正在編寫一個簡單的HTML模板，用於我的客戶可以自己添加內容的動態平臺。

該模板的底部有3個故事，無論每個故事的內容多長時間，都必須保持垂直排列。

理想情況下，我需要更長的故事來確定整個街區的高度。

到目前爲止沒有問題。

問題出現是因爲我需要動態平臺來將單個故事的內容保留在特定的動態標籤中，同時我需要找到一種方式，讓最長的故事確定另外兩個故事的高度故事。

編輯只是爲了澄清：我需要「閱讀更多」單元格總是排在底部，頂部圖片總是排在頂部，而標題和說明單元格高度可能會有所不同。

這裏是我的代碼的結構。我會非常感謝任何建議。

<table width="650" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
      <td> 
      <DYNAMIC TAG> 
       <table width="195" border="0" cellspacing="0" cellpadding="0"> 
         <tr> 
         <td><img src="images/image.jpg"/></td> 
         </tr> 
          <tr> 
          <td>Title </td> 
          </tr> 
         <tr> 
         <td>Text</td> 
         </tr> 
          <tr> 
          <td><a href="#">Read More</a></td> 
          </tr> 
       </table> 
       </DYNAMIC TAG> 
      </td> 

      <td width="22">&nbsp;</td> 
       <td width="195" valign="top"> 
        <DYNAMIC TAG> 
         <table width="195" border="0" cellspacing="0" cellpadding="0"> 
           <tr> 
           <td><img src="images/image.jpg"/></td> 
           </tr> 
            <tr> 
            <td>Title </td> 
            </tr> 
           <tr> 
           <td>Text</td> 
           </tr> 
            <tr> 
            <td><a href="#">Read More</a></td> 
            </tr> 
         </table> 
         </DYNAMIC TAG> 
        </td> 
        <td width="23">&nbsp;</td> 
         <td width="195" valign="top"> 
          <DYNAMIC TAG> 
          <table width="195" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
            <td><img src="images/image.jpg"/></td> 
            </tr> 
             <tr> 
             <td>Title </td> 
             </tr> 
            <tr> 
            <td>Text</td> 
            </tr> 
             <tr> 
             <td><a href="#">Read More</a></td> 
             </tr> 
          </table> 
          </DYNAMIC TAG> 
          </td> 
      </tr> 
     </table> 

我希望我很清楚，一切都有意義，我已經爲你提供了幫助。

祝您有美好的一天，

Eleonora。

Answer 1

最終的故事只能是隻要內容本身，而是一個錶行將會使所有單元保持該行的同一高度：

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="200" bgcolor="#858585" valign="top">Section 1 

    </td> 
    <td width="200" bgcolor="#656565" valign="top">Section 2 

    </td> 
    <td width="200" bgcolor="#454545" valign="top">Section 3<br> 
     This sets the height of all 3.<br>...<br>...<br>...<br>... 
    </td> 
    </tr> 
</table> 

您目前中嵌套每個表的表單元格 - 表格是獨立的，因此它們將根據需要展開，導致3個高度不同的表格。除非您在表中添加背景顏色或邊框，否則這將不可見。在這種情況下，不要將其應用於嵌套表，而是將其應用於父表格單元格。

如果你希望所有的內容在相同高度的表格單元格的底部「浮動」，每個單元的valign屬性更改爲valign="bottom"

---

UPDATE： 感謝澄清 - 這個問題是您想要在同一個單元格內頂部和底部進行設置，這是無法完成的。強制100％高度也不是真的支持，所以將100％高度表與2行（內容然後讀取我）嵌套將不起作用。

有兩種方法我可以想到（除了設置一個固定的高度）。其中一個非常簡單，一個更具有現成的思維。

方法1：

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="200" bgcolor="#858585" valign="top">Section 1<br>...<br>...<br>... 

    </td> 
    <td width="200" bgcolor="#656565" valign="top">Section 2<br>...<br>... 

    </td> 
    <td width="200" bgcolor="#454545" valign="top">Section 3<br> 
     This sets the height of all 3.<br>...<br>...<br>...<br>...<br>&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="200" bgcolor="#858585" valign="top">Read More 
    </td> 
    <td width="200" bgcolor="#656565" valign="top">Read More 
    </td> 
    <td width="200" bgcolor="#454545" valign="top">Read More 
    </td> 
    </tr> 
</table> 

缺點這種方法是，你看我的鏈接不緊跟在代碼中的故事。

方法2：

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="200" bgcolor="#858585" valign="top">Section 1<br>...<br>...<br>... 

    </td> 
    <td width="400" valign="top" rowspan="2"> 
     <table width="400" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="200" bgcolor="#656565" valign="top">Section 2<br>...<br>... 

      </td> 
      <td width="200" valign="top" rowspan="2"> 
      <table width="200" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
       <td width="200" bgcolor="#454545" valign="top">Section 3<br> 
        This sets the height of all 3.<br>...<br>...<br>...<br>...<br> 
       </td> 
       </tr> 
       <tr> 
       <td width="200" bgcolor="#454545" valign="bottom">Read More 
       </td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     <tr> 
      <td width="200" bgcolor="#656565" valign="bottom">Read More 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    <tr> 
    <td width="200" bgcolor="#858585" valign="bottom">Read More 
    </td> 
    </tr> 
</table> 

這些表被嵌套，使得它們被「孫」或從動預先確定的最大。缺點是，這隻有在你知道哪一部分將是最大的時纔有效。這個特定示例的設置方式，第三個表格需要比前兩個表格更多的內容，但是您可以使用其他部分「始終最大」來構建它。

我敢肯定，這兩種選擇都不是理想的選擇，但不幸的是，這是您可以用跨客戶端支持的html-email的限制做的最好的選擇。