无法将文本和图像放入 HTML table

Question

我正在尝试使用 table 行制作 HTML 电子邮件布局，其中文本和图像显示在一行中。但是我无法适应

这就是我想要的样子

我的代码：

<table>
  <tr>
    <td class="padding">
      <table class="content3">
        <tr>
          <td>
            <p style="padding: 20px; background-color: #f7f7f7;">
              Learn how to sync your smartwatch or a fitness band with the Vantage Fit app <a href="#">here</a>.
            </p>
          </td>
          <td>
            <img src="images/smart-devices.png" width="150px" style="background-color: #f7f7f7; display: inline;" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

通过为每个 <td> 元素设置固定高度。设计可以实现。我在 codepen 重新排列了代码：https://codepen.io/samuvpd/pen/gOWbXRx

Answer 2

看起来右边的 <td> 将其大小调整为宽度属性您设置为 150px.您可以尝试将 <td> 设置为 100% 高度 ，然后设置 <tr>到你想要的尺寸。

从技术上讲，如果您给 parent 一个尺寸并告诉 children 填充 100% 它应该会按照您的要求运行。

Answer 3

这似乎是由 <p> 默认边距引起的，这 2 个 <td> 实际上是相同的高度，但背景颜色不适用于边距，因此看起来更小。

我建议删除该边距并使 <td> 具有背景色。

td {
  background-color: #f7f7f7;
}

<table>
  <tr>
    <td class="padding">
      <table class="content3">
        <tr>
          <td>
            <p style="padding: 20px; ">
              Learn how to sync your smartwatch or a fitness band with the
              Vantage Fit app <a href="#">here</a>.
            </p>
          </td>
          <td>
            <img
              src="mages/smart-devices.png"
              width="150px"
              style="display: inline"
            />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

无法将文本和图像放入 HTML table

Unable to fit a text and image in a HTML table

html

css

flexbox

html-email