html - 内容与表格底部不对齐

Question

目前从事电子邮件编码工作:

我试图让这个按钮(由表格创建)与封闭表格的底部对齐。目前它不会对齐，我不确定为什么。

<table width="300" min-width="300" height="500" class="promo_3" align="left">
  <tr>
    <td valign="top">
      <a target="_blank" href="http://www.thing.html">
        <img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg">
      </a>
      <br>
      <br>

      <h1> TRAINING </h1>
      <span valign="top" class="content">TITLE HERE</span>
      <p>TEXT HERE</p>
      <br>
      <!--Button THIS WILL NOT ALIGN TO THE BOTTOM -->

      <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
        <tr>
          <td height="20">
            <table border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                <td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.thing.html" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Read More</a> 
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <!--Button + Social End -->


    </td>
  </tr>


</table>

Answer 1

也许试试这个方法:

    <table width="300" min-width="300" height="500" class="promo_3" align="left">
  <tr>
    <td valign="bottom"><br>
      <br>

     <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td height="200" valign="top"><a target="_blank" href="http://www.thing.html"><img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg"></a></td>
    </tr>
    <tr>
      <td height="200" valign="top">

   <h1> TRAINING </h1>
      <span valign="top" class="content">TITLE HERE</span>
      <p>TEXT HERE</p>


   </td>
    </tr>
  </tbody>
</table>



      <br>
      <!--Button THIS WILL NOT ALIGN TO THE BOTTOM -->

      <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
        <tr>
          <td height="20">
            <table border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                <td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.thing.html" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Read More</a> 
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <!--Button + Social End -->


    </td>
  </tr>


</table>

我所做的是添加一个有两行的表格，两行都有特定的高度，内容顶部对齐。一些电子邮件客户端臭名昭著，可能不会像在代码上那样将代码与底部对齐，对于这些电子邮件客户端，您可以在 TD 上使用 padding-top。希望这会有所帮助。

干杯