如何构建html时事通讯响应块顺序

Question

我想构建 2 个列块，其中包含 3 个元素，元素 1 和元素 2 在左侧，而元素 3 在右侧。问题是我要在手机版上，顺序是1,3,2（现在显示的是1,2,3）。我该如何构建它？ description image

<style>
@media all and (max-width: 600px){
 .on600-widthfull { width:100%;min-width:100%; }
}
</style>
<table>
 <tr>
  <th class="on600-widthfull">
   <table class="on600-widthfull">
    <tr><th>1</th></tr>
    <tr><th>2</th></tr>
   </table>
  </th>
  <th class="on600-widthfull">3</th>
 </tr>
</table>

Answer 1

这是如何工作的一个非常简单的示例。

首先，您需要在样式表中使用@media 查询：

<style>
td {
    text-align: center;
    padding: 10px 0;
}
  @media screen and (max-width: 600px) {
    .stack-in-mobile {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  }
</style>

接下来，您需要一张桌子。你的 1-3-2 想法永远不会奏效。这将：

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
  <tr>
    <td class="stack-in-mobile">1</td>
    <td rowspan="2" class="stack-in-mobile">2</td>
  </tr>
  <tr>
    <td class="stack-in-mobile">3</td>
  </tr>
</table>

它适用于所有主要的电子邮件客户端，但它没有格式，因此您需要对其进行处理。基本思想是在移动设备中创建一个重新格式化表格的类。

我建议查看一些现有的电子邮件模板以更好地了解它们的工作原理并遵循该示例。我建议像 Cerberus 这样的。

• https://tedgoas.github.io/Cerberus/

祝你好运。

td {
text-align: center;
padding: 10px 0;
}
  @media screen and (max-width: 600px) {
.stack-in-mobile {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
  }

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
  <tr>
<td class="stack-in-mobile">1</td>
<td rowspan="2" class="stack-in-mobile">2</td>
  </tr>
  <tr>
<td class="stack-in-mobile">3</td>
  </tr>
</table>