0

我正在开发一个响应式电子邮件模板，我真的想要一个用于特色产品的表格布局，桌面版 3x2，移动版 2x3。

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

表格网格 3x2 到 2x3

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>
4

1 回答 1

0

不要为此使用表格单元格。细胞将继续并排排列成一排，这是它们的自然和预期行为。
表格单元格出现在其他单元格下方的唯一方法是在另一行中。
您的实现违背了 HTML 逻辑。

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

这是一个松散的示例（包括幽灵表），供您适应工作：

<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;}
}
于 2019-06-07T11:32:30.763 回答