电子邮件布局弹性

Question

我目前正在制作带有表格的电子邮件布局，我需要的是能够将图片放在某些特定屏幕尺寸的文本上方

这是我的代码示例：

<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0; padding: 50px 20px 10px;">
  <tr>
    <td valign="center" style="text-align:left;">
      <h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
      <h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
    </td>
    <td valign="center" style="text-align:left;">
      <img style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
    </td>
  </tr>
</table>

所以问题是从计算机屏幕查看图片时，图片必须与文本在同一行，而从移动邮件客户端查看时，图片必须位于文本上方/下方

Answer 1

我最喜欢的技术是使用表格标题单元格 () 并在移动设备上显示阻止它们。大多数电子邮件客户端都可以这样做，但有一些移动电子邮件客户端不允许这样做，因此您的布局不会按预期堆叠。

关于您的代码的几点说明：

1. 我注意到在两个单元格上使用了 valign="centre"。对于 valign，正确的值是中间。居中用于对齐属性。因此，只需切换它们即可。
2. 您在代码中使用了很多负边距。虽然这不是世界末日，但我会想象在测试中会出现相当多的问题。我会先更正 valign 值，然后在表格单元格上使用填充来尝试获取您正在寻找的布局。如果您遇到问题，也可以使用行高。负边距值可能弊大于利。

我已经为您编写了几个示例，并结合了我在上面的注释：

1. 当前 - 您发布的代码
2. 堆叠表格标题单元格 - 基本堆叠单元格示例
3. 反转堆叠的表格标题单元格 - 第 2 点，但按照您的要求进行了反转

Codepen - https://codepen.io/Digital_Frankenstein/pen/WNObXzb

代码：

@media only screen and (max-width:460px) {
  .device-width { width:100%!important; padding:0; min-width:100%!important; }
  .device-width-padding { width:85%!important; padding:0; min-width:85%!important; }

  .th-block { display:block; width:100%!important; }
  .th-block-reverse-header { display:table-header-group; width:100%!important; }
  .th-block-reverse-footer { display:table-footer-group; width:100%!important; }
}

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" role="presentation">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid red;" role="presentation">
        <tr>
          <td style="font-weight:600; color:red; font-size:20px; padding:10px 0 5px 0; text-align:left;">
            Current
          </td>
        </tr>
        <tr>
          <td align="center" style="padding: 50px 20px 10px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
              <tr>
                <td valign="center" style="text-align:left;">
                  <h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
                  <h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
                </td>
                <td valign="center" style="text-align:left;">
                  <img style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid green;" role="presentation">
        <tr>
          <td style="font-weight:600; color:green; font-size:20px; padding:10px 0 5px 0; text-align:left;">
            Stacked table header cells
          </td>
        </tr>
        <tr>
          <td align="center" style="padding: 50px 20px 10px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
              <tr>
                <th class="th-block" valign="middle" style="text-align:left;">
                  <h1 style="margin-top:0; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
                  <h1 style="margin-top:0; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
                </th>
                <th class="th-block" valign="middle" style="text-align:left;">
                  <img style="margin-right: 10px;" src="https://via.placeholder.com/300.jpg" alt="">
                </th>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid blue;" role="presentation">
        <tr>
          <td style="font-weight:600; color:blue; font-size:20px; padding:10px 0 5px 0; text-align:left;">
            Reverse stacked table header cells
          </td>
        </tr>
        <tr>
          <td align="center" style="padding: 50px 20px 10px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
              <tr>
                <th class="th-block-reverse-footer" valign="middle" style="text-align:left;">
                  <h1 style="margin-top:0; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
                  <h1 style="margin-top:0; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
                </th>
                <th class="th-block-reverse-header" valign="middle" style="text-align:left;">
                  <img style="margin-right: 10px; margin-top:0;" src="https://via.placeholder.com/300.jpg" alt="">
                </th>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>