无法在 HTML 表格中放置文本和图像答案

【问题标题】：Unable to fit a text and image in a HTML table无法在 HTML 表格中放置文本和图像
【发布时间】：2025-11-28 14:05:02
【问题描述】：

我正在尝试使用表格行制作 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>

【问题讨论】：

标签： html css flexbox html-email

【解决方案1】：

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

【讨论】：

【解决方案2】：

看起来右侧的 <td> 会根据您设置为 150px 的宽度属性调整其大小。您可以尝试将 <td> 设置为 100% 高度，然后将 <tr> 设置为您想要的大小。

从技术上讲，如果你给父母一个大小并告诉孩子们填充它 100% 它应该按照你的意愿行事。

【讨论】：

【解决方案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>

【讨论】：