使用 html 和 css 的电子邮件内容布局

Question

我正在制作一个电子邮件模板，它将发送包含填充内容的电子邮件。问题是我无法让布局正常工作并得到电子邮件客户端的支持。

我开始使用基于 Flex 的方法，这种方法很简洁，在预览中效果很好，但是在发送电子邮件时，客户只是忽略了 Flex 和绝对定位

问题： 如何对齐最后一个子项（链接），使它们在高度上彼此对齐，而不管总行高如何？

现在，正如我们在 JSfiddle 和下面的代码中看到的那样，如果我们运行它，带有文本“LINK”的

a-tag

都紧接在带有乱码的

p-tag

之后。我希望它们与父容器的底部对齐。

当前：

<image>       <image>

<Giberish     <Giberish>
that is 
very long>    <link>

<link>

想要的：

<image>       <image>

<Giberish     <Giberish>
that is 
very long>    

<link>        <link>

我无法使用

display:flex

或

absolute

定位。大多数电子邮件客户端只是忽略它包含的 gmail。

这是我现在的降价，几乎可以工作。

<tr>
  <td class="background-color">
    <div style="display: table; width: 450px; margin-top: 20px;">
      <div style="display: table-cell; vertical-align:top; max-width: 200px;">
        <a href="">
          <img width="195px" alt="image 5" src="" />
        </a>
        <p style="font-size: 20px; max-width: 195px; margin: 10px auto;">
          df kdjkl dfdf asjkld fjkld sfjkd asjklad sjkdasf jdasf jd fsajkl dasfjkldf asjkld afsjklfas jkl ad
        </p>
        <div style="display: table; height: 100%; width: 100%;">
          <div style="display: table-cell; vertical-align: bottom;">
            <a href="" class="small" style="font-style: italic;">LINK</a>
          </div>
        </div>
      </div>
      <div style="display: table-cell; position: relative; vertical-align:top; max-width: 200px">
        <a href="">
          <img width="195px" alt="image 5" src="" />
        </a>
        <p style="font-size: 20px; max-width: 195px; margin: 10px auto;">
          adf shafdshjkfadhjk ladfshjkldaf shj
        </p>
        <div style="display: table; height: 100%; width: 100%;">
          <div style="display: table-cell; vertical-align: bottom;">
            <a href="" class="small" style="font-style: italic;">
              LINK
            </a>
          </div>
        </div>
      </div>
    </div>
  </td>
</tr>

Js小提琴

Answer 1

<tr>
  <td class="background-color">
    <div style="display: table; width: 450px; margin-top: 20px;">
      <div style="display: table-cell; vertical-align:top; max-width: 200px;">
        <a href="">
          <img width="195px" alt="image 5" src="" />
        </a>
        <p style="font-size: 20px; max-width: 195px; margin: 10px auto;">
          df kdjkl dfdf asjkld fjkld sfjkd asjklad sjkdasf jdasf jd fsajkl dasfjkldf asjkld afsjklfas jkl ad
        </p>
        <div style="display: table; height: 100%; width: 200%;">
          <div style="display: table-cell; vertical-align: bottom;">
            <a href="" class="small" style="font-style: italic;">LINK</a>
          </div>
          <div style="display: table-cell; vertical-align: bottom;">
            <a href="" class="small" style="font-style: italic;">
              LINK
            </a>
          </div>
        </div>
      </div>
      <div style="display: table-cell; position: relative; vertical-align:top; max-width: 200px">
        <a href="">
          <img width="195px" alt="image 5" src="" />
        </a>
        <p style="font-size: 20px; max-width: 195px; margin: 10px auto;">
          adf shafdshjkfadhjk ladfshjkldaf shj
        </p>
        <div style="display: table; height: 100%; width: 100%;">
          
        </div>
      </div>
    </div>
  </td>
</tr>