使图像与文本对齐

Question

它非常混乱，但它有效......不知何故，我目前遇到的问题是我在脚本中有图像，但是我不知道如何使其向左对齐并具有后面的文本“亲切的问候”位于图像右侧，第 1 行文本的顶部与图像顶部的高度相匹配。

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>[phone]&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 protected]&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:''});
  });
}

我尝试过使用一种叫做“浮动”的东西，但这没有任何作用，此时我有点不适应。

Answer 1

您可以在图像上使用

float:left;

，但这只会使文本在之后浮动。所以你必须将

<img ...>

向后移动一点。

然后，图像将与文本对接。所以实际上，您想要的是将其放在一个简单的表格中。

不确定您的意图是什么，地址位于所有不间断空格之后，但没有什么是表格不能更好地解决的。

这就是我得到的（还修复了未完成的

<b>

和

<spans>

）。我添加了“vertical-align: top”以使文本从图像顶部开始，否则它可能默认居中。

Dear asdf.<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>
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
        <td style="padding-right: 15px;vertical-align: top;"><img src="URL Example" alt="Image 1" style="width: 200px; height: 180px;"></td>
        <td width="100%" style="vertical-align: top;">
            <b><span style='color: #C19B77;'>Title of Person</span><br>
    <span style='color: #C19B77; font-size: 15px;'>Name of Person</span></b><br><br>
<b><span style='color: #C19B77;'>Mobile:</span></b>[phone]&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:</span></b>[email protected]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Adress line 2<br>
        </td>
    </tr>
</table>