Question

我正在开发一个响应式电子邮件模板，我真的很想要特色产品的表格布局，台式机为3x2，移动设备为2x3。

当前，我正在使用一个表格，其中的单元格会更改为对移动客户端显示为内联块。但是，这会中断Outlook和Thunderbird，因为它们将所有单元格显示在一行中。我曾尝试过浮动元素，但它们又再次断裂。

CSS

     @media screen and (max-width: 600px) {
        .stack2 {
          width: 50% !important;
        }
      }

      .stack2 {
        display: inline-block;
        box-sizing: border-box;
      }

HTML


<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
  <tr>
    <!-- Product #1 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #2 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #3 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #4 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #5 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #6 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
  </tr>
</table>

Answer 1

请勿为此使用表格单元格。细胞将继续连续并排堆叠，这是它们的自然行为和预期行为。
表格单元格出现在其他单元格下方的唯一方法是在另一行中。
您的实现违反HTML逻辑。

我将为此使用表格。这样，它们将根据您提供的宽度轻松堆叠和重新排列。请记住，您将需要使用幻像表使这些表在Outlook中并排放置。

这是一个宽松的示例（包括Ghost表），可让您适应自己的工作：

<table border="0" cellspacing="0" cellpadding="0" class="FullWidthOnMobile" style="width:600px;">
<tr>
    <td>
        <!--[if (gte mso 9)|(IE)]>
        <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td>
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        <tr>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td>
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

我使用的媒体查询。再次按照我的命名对它们进行调整，以简化对我正在做的事情的了解：

@media only screen and (max-width:600px){
    .FullWidthOnMobile{width:100%!important;min-width:100%!important;}
    .HalfWidthOnMobile{width:50%!important;min-width:50%!important;}
}

如何为响应电子邮件创建流畅的html表，将其从3x2调整为2x3？

1 个答案: