How can I get two clickbale images side by side using just plane HTML-CodePudding

I have no basic clue about html and and right now am kinda stuck, I need two images side by side around the bottom half part of a email template, thing is no matter what I do I can't get the image to be side by side. there is already a hero image on the email template I am not sure if that's what causing the error. Can you please help me with this or give me some learning metrials so that I can figure this out.

Can you please help me with this or give me some learning metrials so that I can figure this out.

PS: Please don't mind the rickroll video, I added it to replace the link

The below code is how the banner hero image is setup

<tr>
              <td  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  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>

CodePudding user response：

Use a <table>, it should be compatible with Outlook email client as well. For more on HTML email see this 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>

CodePudding user response：

You can do it by several ways. The easiest is use another table in td with two columns, like this:

<tr>
  <td  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  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>

Don't forget to let me know if it works for you or not.

CodePudding user response：

I would recommend using the display: flex; property, which automatically makes the flow of the content inside a container to a row.

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