html - 如何让 p 标签在响应式电子邮件中从堆叠位置​​从左到右移动

Question

我一直在创建响应式电子邮件，但在桌面/移动更改方面遇到了一些问题。我希望桌面版看起来像这样:

Order Summary                Shipping Address
12345                         111 Broadway st

手机看起来像这样:

Order Summary     12345
Shipping Address   111 Broadway Street

我已经尝试了几种方法，虽然它在我的本地服务器上的 html 检查中有效，但当我将测试电子邮件发送到客户端服务器时它不起作用。

代码片段显示了其中一个 div 部分的基本电子邮件模板，任何见解将不胜感激

     @media screen and (max-width: 400px) {

      .two-column {
        max-width: 50%!important;
        width: 50% !important;
        background-color: #730E15!important;
      }

    }

<td class="two-column" style="padding: 5px 0 10px 0;text-align: center;font-size: 0;">
    <div class="section" style="width: 50%;max-width: 300px;display: inline-block;vertical-align: top;">
            <table width="100%" style="border-spacing: 0;font-family: sans-serif;color: #727f80;">
              <tr>
                <td class="inner-td" style="padding: 10px;">
                  <table class="content" style="border-spacing: 0;font-family: sans-serif;color: #727f80;width: 50%;padding-top: 20px;font-size: 16px;line-height: 20px;text-align: justify;">
                    <tr>
                      <td style="padding: 0;">
                        <p>Order Number</p>
                        <p> 12345 </p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div> <!--- End First Column of Two Columns -->

Answer 1

扩展我的评论:

您可以在 HTML 中同时包含水平和垂直标题，然后根据屏幕尺寸显示正确的标题。

您可以使用 CSS Media Queries根据屏幕宽度显示所需的标题。

作为替代方案，如果您使用 <div> s 而不是 <table> s，您可以使用媒体查询让“列”在桌面上水平 float ，但在移动设备上垂直堆叠。