内容未与表格底部对齐答案

【问题标题】：Content not aligning to bottom of table内容未与表格底部对齐
【发布时间】：2017-06-12 10:19:06
【问题描述】：

目前正在为电子邮件编码：

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

<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>

【问题讨论】：

技术上它已经在表格的底部了
如何将除“按钮”以外的所有内容对齐到顶部？目前将它与底部对齐的是什么？我将其中两个并排放置在一个较大的表格中，并且内容都与这个较大表格的顶部对齐。

标签： html css email html-table

【解决方案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。希望这会有所帮助。

干杯

【讨论】：

【解决方案2】：

这就是你要找的东西？只需将 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>

【讨论】：