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>

如何建立HTML时事通讯响应块顺序

1 个答案: