电子邮件布局弹性

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>

所以问题是在电脑屏幕上查看图片时图片必须与文字在一行，而在移动邮件客户端查看时above/below文字必须在一行

Answer 1

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

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

我注意到在两个单元格上使用了 valign="centre"。对于 valign，正确的值是 middle。中心用于对齐属性。所以只需将它们调换一下即可。
您在代码中使用了很多负边距。虽然这不是世界末日，但我可以想象在测试中会出现很多问题。我会先更正 valign 值，然后在 table 单元格上使用填充来尝试获得您正在寻找的布局。如果您遇到问题，还可以调整行高。负保证金值可能弊大于利。

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

当前 - 您发布的代码
堆叠 table header 单元格 - 基本堆叠单元格示例
反转堆叠 table header 单元格 - 第 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>

电子邮件布局弹性

Email layout flex

html

css

html-email