如何仅使用平面 HTML 并排获得两个可点击图像答案

【问题标题】：How can I get two clickbale images side by side using just plane HTML如何仅使用平面 HTML 并排获得两个可点击图像
【发布时间】：2022-11-18 00:54:46
【问题描述】：

我对 html 没有基本的了解，现在有点卡住了，我需要在电子邮件模板的下半部分并排放置两张图片，但无论我做什么，我都无法将图片并排放置边。电子邮件模板上已经有一个英雄形象我不确定这是否是导致错误的原因。你能帮我解决这个问题吗？或者给我一些学习资料，这样我就可以解决这个问题。

你能帮我解决这个问题吗？或者给我一些学习材料，这样我就可以解决这个问题。

PS：请不要介意rickroll视频，我添加它来替换链接

下面的代码是横幅英雄图像的设置方式

<tr>
              <td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
                <a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
                  <img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
                </a>
              </td>
            </tr>

【问题讨论】：

标签： html

【解决方案1】：

使用<table>，它也应该与 Outlook 电子邮件客户端兼容。有关 HTML 电子邮件的更多信息，请参阅article。

<table>
  <tr>
    <td>
      <a href="#">
        <img src="https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0">
      </a>
    </td>
    <td>
      <a href="#">
        <img src="https://placem.at/places?w=160&h=90&random=1&txt=2&txtclr=fc0">
      </a>
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您可以通过多种方式做到这一点。最简单的方法是在 td 中使用另一个包含两列的表，如下所示：

<tr>
  <td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
    <a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
       <img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
    </a>
  </td>
</tr>

<tr>
  <td>
    <table>
      <tr>
        <td>
          <a href="#">
            <img src="#">
          </a>
        </td>
        <td>
          <a href="#">
            <img src="#">
          </a>
        </td>
      </tr>
    </table>
  </td>
</tr>

不要忘记让我知道它是否适合你。

【讨论】：

【解决方案3】：

我建议使用 display: flex; 属性，它会自动使容器内的内容流向一行。

<div style="display: flex;">
    <img src="example.com" />
    <img src="example.com" />
</div>

【讨论】：