Question

我目前正在构建一个HTML电子邮件，而且我在让所有电子邮件客户端上的两个TD高度相同时遇到了实际问题。

这是一封响应式电子邮件，因此我将列分成两个表，而不是将它们全部嵌入到同一个表中，以便它们可以在移动设备上互相捕捉。

我已经尝试在TD和桌子上都说明了高度并没有取得什么成功，最后我甚至投入了最小高度。

我应该说它适用于所有基于网络的浏览器（除了雅虎）我的大问题是outlook 2007＆amp; 2010年，这是客户实际上非常烦人地测试电子邮件的内容。

以下是一个示例：

<!-- square panels wrapper -->
<table width="600" border="0" cellpadding="0" cellspacing="0" class="square_panel_wrapper"><tr><td>

    <!-- square panels container -->
    <table width="600" border="0" cellpadding="0" cellspacing="0" class="square_panel_container"><tr><td>

        <!-- left table -->
        <table width="290" height="640" border="0" cellpadding="10" cellspacing="0" align="left" class="square_panel_left" style="border: 1px solid #c8c9cb; height: 640px; min-height: 640px;">
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
        </table>

        <!-- right table -->
        <table align="right" width="290" height="640" border="0" cellpadding="10" cellspacing="0" class="square_panel_right" style="border: 1px solid #c8c9cb; height: 640px; min-height: 640px;">
            <tr>
              <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; margin-top: 0px;  text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo. Aenean molestie tristique erat a consequat. Vestibulum nec nunc vel velit ornare fermentum in eget ipsum. Mauris venenatis volutpat malesuada. Curabitur fringilla libero at turpis tempor egestas quis rhoncus quam.  
            </td>
          </tr>
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
        </table>

    </td></tr></table>

</td></tr></table>

Answer 1

如果<td>的高度始终固定，您可以尝试在<img src="http://somesite.com/dot.png" style="width:1px;height:640px" />中插入<td>，此透明图片将不可见并且具有固定的高度，因此您的<td>将会与图像具有相同的最小高度。

Answer 2

是的，正确的悲伤穿着你可以强制使用td的min-height属性 - 在td中放置不可见的图像，或者将td包装成div。第一种情况的例子：

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>

匹配HTML电子邮件中的TD高度

2 个答案: