如何实现邮件签名中图片左对齐，右侧文本与图片顶部对齐？

问题描述 #

我用以下Google Apps Script代码发送邮件，代码能正常运行但签名排版混乱。需求是让签名里的图片左对齐，“Kind regards”之后的签名文本放在图片右侧，且文本首行顶部与图片顶部对齐。试过float属性但没效果，求解决方法。

原代码 #

function myFunction() {
  let sheet = SpreadsheetApp.getActiveSheet();
  let data = sheet.getRange('A2:B').getDisplayValues();
  data.filter(row => row.every(Boolean)).forEach(row => {
    let [name, address] = row;
    let subject = `Subject Text`;
    let body = `Dear ${name}.<br><br> 

I hope this email finds you well.<br><br> 

I am writing to you in regards to XXX, ""."<br><br> 

.<br><br>

.<br><br>

Kind Regards,<br><br>
<b><span style='color: #C19B77;'>Title of Person<br>
<span style='color: #C19B77; font-size: 15px;'>Name of Person</span><br><br>
<b><span style='color: #C19B77;'>Mobile:</b>+44 12345678&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Address<br>
<b><span style='color: #C19B77;'>Email:</b>Email@Email.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Adress line 2<br>
<img src="URL Example" alt="Image 1" style="width: 200px; height: 180px;">`;
  
    MailApp.sendEmail({to: address, subject, htmlBody: body, cc:''});
  });
}

解决方案 #

部分邮件客户端对float属性支持有限，改用flex布局实现图片与文本的并排对齐，这是兼容性更好的方案。核心修改是将签名文本和图片放入flex容器，通过align-items: flex-start确保顶部对齐，同时用margin-left控制两者间距。

修改后的完整代码 #

function myFunction() {
  let sheet = SpreadsheetApp.getActiveSheet();
  let data = sheet.getRange('A2:B').getDisplayValues();
  data.filter(row => row.every(Boolean)).forEach(row => {
    let [name, address] = row;
    let subject = `Subject Text`;
    let body = `Dear ${name}.<br><br> 

I hope this email finds you well.<br><br> 

I am writing to you in regards to XXX, ""."<br><br> 

.<br><br>

.<br><br>

Kind Regards,<br><br>
<div style="display: flex; align-items: flex-start;">
  <div>
    <b><span style='color: #C19B77;'>Title of Person<br>
    <span style='color: #C19B77; font-size: 15px;'>Name of Person</span><br><br>
    <b><span style='color: #C19B77;'>Mobile:</b>+44 12345678&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Address<br>
    <b><span style='color: #C19B77;'>Email:</b>Email@Email.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Adress line 2<br>
  </div>
  <div style="margin-left: 20px;">
    <img src="URL Example" alt="Image 1" style="width: 200px; height: 180px;">
  </div>
</div>`;
  
    MailApp.sendEmail({to: address, subject, htmlBody: body, cc:''});
  });
}

备选兼容方案（针对老旧邮件客户端） #

如果flex布局在某些客户端不生效，可改用inline-block配合vertical-align: top实现同样效果，替换签名部分的代码即可：

Kind Regards,<br><br>
<div>
  <div style="display: inline-block; vertical-align: top;">
    <b><span style='color: #C19B77;'>Title of Person<br>
    <span style='color: #C19B77; font-size: 15px;'>Name of Person</span><br><br>
    <b><span style='color: #C19B77;'>Mobile:</b>+44 12345678&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Address<br>
    <b><span style='color: #C19B77;'>Email:</b>Email@Email.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Adress line 2<br>
  </div>
  <div style="display: inline-block; margin-left: 20px;">
    <img src="URL Example" alt="Image 1" style="width: 200px; height: 180px;">
  </div>
</div>

内容的提问来源于stack exchange，提问作者TiredAndHungry