Question

我正在使用Litmus作为测试工具，为广告系列监控制作响应式eDM。

我遇到了一些麻烦，让桌子看起来像下图。

我当前的代码看起来像这样。整个文档大小为600px，此表需要以540px为中心。

<table border="0" cellspacing="0" cellpadding="0" class="content" align="center">
<tr>
  <td colspan="3">
    <table width="100%" bgcolor="#ffffff">
      <tr>
        <td class="gutter">&nbsp;</td>
        <td class="spacer-medium">&nbsp;</td>
        <td class="gutter">&nbsp;</td>
      </tr>
      <tr>
        <td class="gutter">&nbsp;</td>


          <tr width="540" height="148" style="background-image: url('rectangle.png'); background-size:100% 100%; background-repeat: no-repeat; width: 540px; padding-top:20px; padding-left:20px; padding-right:10px;color: #ffffff; font-family: Arial, Helvetica; font-size: 14px; line-height: 20px;" class="__not-plain-text gradient__image centre" background="rectangle.png" bgcolor="#f36d00">

          <td width="400" align="left" style="float:left; width:400px; font-weight:bold;">TEXT GOES HERE AS BOLD</td>
          <td width="400" align="left" style="float:left; width:400px;">LONGER PARAGRAPH TO GO HERE AS NORMAL</td>
          <td><img src="images/man2.png" align="right" alt="offer" width="109" style="width: 109px; float:right padding-right:10px" class="__not-plain-text"></td>
            </tr>
      </tr>
    </table>
   </td>
</tr>

任何帮助将不胜感激！谢谢。

Answer 1

基于Niklas Fett的回答，我拿了他的代码并用你的电子邮件宽度进行了更新。这是响应式电子邮件设计（适用于支持@media查询的电子邮件客户端）和混合电子邮件设计（适用于不支持媒体查询的电子邮件客户端）的组合。这有点复杂，但您可以使用下面的代码段来构建您的电子邮件。

还要注意正确嵌套的<table>代码：您无法将<tr>直接嵌套在<td>内。

＆＃13;

@media screen and (max-width: 600px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
        
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

＆＃13;

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" background="rectangle.png">
<tr>
	                <!-- dir=rtl : This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
                    <td dir="rtl" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
                        <!--[if mso]>
                        <table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
                        <tr>
                        <td align="center" valign="top" width="600">
                        <![endif]-->
                        <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
                            <tr>
                                <td align="center" valign="top" style="font-size:0; padding: 10px 0;">
                                    <!--[if mso]>
                                    <table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
                                    <tr>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                                    <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    <td align="left" valign="top" width="440">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
                                                    <strong style="color:#111111;">Class aptent taciti sociosqu</strong>
                                                    <br><br>
                                                    Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]-->
                                </td>
                            </tr>
                        </table>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
                </table>

＆＃13;

Answer 2

这个问题的解决方案有点复杂。您需要大量代码才能确保，您的邮件将在大多数邮件客户端中正确显示。尝试使用这个片段，我在JSfiddle中设置，因为它非常长：

https://jsfiddle.net/ojyr085t/

或者它的代码在这里：

<style>
@media screen and (max-width: 480px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }
</style>
<html><body>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 680px;">
<tr>
                    <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
                    <td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
                        <!--[if mso]>
                        <table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                        <tr>
                        <td align="center" valign="top" width="660">
                        <![endif]-->
                        <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
                            <tr>
                                <td align="center" valign="top" style="font-size:0; padding: 10px 0;">
                                    <!--[if mso]>
                                    <table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                                    <tr>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                                    <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    <td align="left" valign="top" width="440">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
                                                    <strong style="color:#111111;">Class aptent taciti sociosqu</strong>
                                                    <br><br>
                                                    Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]-->
                                </td>
                            </tr>
                        </table>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
                </table>
</body></html>

响应式电子邮件，创建HTML表格

2 个答案: