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

这是你在找什么？只需将align ='left'添加到包含按钮的表格。

<table width="300" min-width="300" height="500" class="promo_3" align="left">
  <tr>
    <td>
      <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" align='left' 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 2

也许尝试一下这个方法：

    <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的电子邮件客户端。希望这会有所帮助。

干杯

内容未与表格底部对齐

2 个答案: