我怎样才能得到两个clickbale图像并排只使用平面HTML

6tqwzwtp  于 2022-11-20  发布在  其他
关注(0)|答案(3)|浏览(99)

我没有关于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>
ig9co6j1

ig9co6j11#

使用<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>
lpwwtiir

lpwwtiir2#

你可以通过几种方法来实现。最简单的是在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>

别忘了让我知道它是否适合你。

u4dcyp6a

u4dcyp6a3#

我建议使用display: flex;属性,它会自动将容器中的内容流到行中。

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

相关问题