Question

我正在尝试为将在Mailchimp上发送的电子邮件新闻稿设计标题。我已经设法按照希望的方式在邮件编辑器中进行修改，但是，当在其他阅读器上进行测试时，标头完全失效。我相信问题在于元素的位置，是吗？

我尝试了几种CSS位置组合，但没有取得重大成功。

.header {
	background-color: #5724a9 !important;
    width: 100%;
    height: auto;
    min-height: 14em;
    min-width: 600px;
    position: relative;
}


.VER {
  font-family: Arial;
  font-size: 10px;
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  line-height: 1.8;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  position: absolute;
  top: 3%;
  left: 3%;
  word-wrap: break-word;
}

.logo {
  width: 28%;
  max-height: 12em;
  object-fit: contain;
  float: left;
  position: absolute;
  padding-top: 2em;
  padding-left: 14.5em;
  padding-right: 14.5em;
}

<div class="header">

<a href="*|ARCHIVE|*" style="text-decoration: none;"> <p class="VER">Ver este email no browser</p></a>



<a href="https://www.instagram.com/desembola/" style="text-decoration: none; display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/38baf9eb-8971-4232-8877-e821fb206396.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/929291fe-8e66-433a-893d-860c863dd597.png 2x,
             https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/0668c4e9-df06-42cd-a8fb-0125371d2478.png 3x" class="instagram"></a>
             
 <a href="https://www.facebook.com/desembolanews/" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/d29b31ac-a288-47a3-aa9c-d2ab0b650374.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e92c4f99-3f9a-4676-af77-0fa93f54c0e6.png 2x,
             https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/abb16351-fc77-4bf5-b34c-efa005ee76fe.png 3x" class="facebook"></a>            
     
<a href="https://open.spotify.com/user/5hmqdqrhlk9vcweti5ukuf3ow?si=dzJKoTzKSoGK_fuLByzZZQ" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/7ab88f02-314e-4cc7-bbeb-0d3d216d1dac.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/433683ea-5f9d-4d3a-ac8c-ab0d4a6de392.png  2x, https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e9d7c117-efdb-448c-aa7a-bdbe0a3ad2f5.png 3x" class="spotify"></a>

预期：

现实（在不同的浏览器上）：

Answer 1

不幸的是，电子邮件是以非常原始的方式呈现的。在大多数电子邮件客户端中，使用div和单独的样式声明很可能行不通。

对于初学者来说，您将必须使用表格布局。一些最佳做法here

您将必须内联所有CSS mailchimp工具：here

像开发网站一样，花时间尝试开发HTML电子邮件是不值得的。一旦开始了上述工作，就可以轻松定义开发中的特定问题。

Answer 2

这里是如何完成此操作的示例。基本上是3列，其中图片和链接位于不同的列中。

您必须记住，电子邮件不是网页。每个元素都应该有自己的内联CSS。媒体查询和全局CSS可以位于文档的开头，但是并非所有CSS都可以被所有电子邮件客户端读取。提前查看最好的CSS guide created by Campaign Monitor。它是开始使用CSS的最佳资源。

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="purple">
  <tbody>
    <tr>
      <td width="200"><a href="*|ARCHIVE|*" style="text-decoration: none;color:#ffffff;"> <p class="VER">Ver este email no browser</p></a></td>
      <td align="center" style="color:#ffffff;">Logo here</td>
      <td width="100">
        
          <a href="https://www.instagram.com/desembola/" style="text-decoration: none; display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/38baf9eb-8971-4232-8877-e821fb206396.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/929291fe-8e66-433a-893d-860c863dd597.png 2x,
             https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/0668c4e9-df06-42cd-a8fb-0125371d2478.png 3x" class="instagram"></a>
             
 <a href="https://www.facebook.com/desembolanews/" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/d29b31ac-a288-47a3-aa9c-d2ab0b650374.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e92c4f99-3f9a-4676-af77-0fa93f54c0e6.png 2x,
             https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/abb16351-fc77-4bf5-b34c-efa005ee76fe.png 3x" class="facebook"></a>            
     
<a href="https://open.spotify.com/user/5hmqdqrhlk9vcweti5ukuf3ow?si=dzJKoTzKSoGK_fuLByzZZQ" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/7ab88f02-314e-4cc7-bbeb-0d3d216d1dac.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/433683ea-5f9d-4d3a-ac8c-ab0d4a6de392.png  2x, https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e9d7c117-efdb-448c-aa7a-bdbe0a3ad2f5.png 3x" class="spotify"></a>
        
      </td>
    </tr>
  </tbody>
</table>

有没有一种方法可以将标题的元素保持在其“响应位置”？

2 个答案: