如何构建 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

这是一个非常简单的例子来说明它是如何工作的。

首先，您需要一个样式为 sheet:

的@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>

接下来，您需要 table。你的 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>

它适用于每个主要的电子邮件客户端，但它没有格式设置，因此您需要进行处理。基本思想是在移动设备中设置一个 class 重新格式化 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>

如何构建 html 时事通讯响应块订单

How to build html newsletter responsive block order

html

css

email

newsletter