HTML电子邮件 - 垂直对齐内容

时间:2013-10-25 09:58:29

标签: css html-email vertical-alignment

我是这个论坛的新手,如果这个问题已经在其他地方得到解决,我在前言中道歉,我真的找不到任何有用的东西。

我正在编写一个简单的HTML模板,用于动态平台,我的客户可以自己添加内容。

模板底部有3个故事,无论每个故事的内容有多长,都必须保持垂直。

理想情况下,我需要更长的故事来确定整个街区的高度。

到目前为止没问题。

问题出现是因为由于动态平台我需要将单个故事的内容保存在特定的动态标签中,同时我需要找到一种方法,其中最长的故事确定其他两个故事的高度。

编辑只是为了澄清:我需要“阅读更多”单元格始终在底部,顶部图片总是在顶部,而标题和描述单元格高度可能会有所不同。

这是我的代码的结构。我会非常感谢任何建议。

<table width="650" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
            <DYNAMIC TAG>
                <table width="195" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td><img src="images/image.jpg"/></td>
                      </tr>
                          <tr>
                            <td>Title </td>
                          </tr>
                      <tr>
                        <td>Text</td>
                      </tr>
                          <tr>
                            <td><a href="#">Read More</a></td>
                          </tr>
                 </table>
               </DYNAMIC TAG>  
            </td>

            <td width="22">&nbsp;</td>
                <td width="195" valign="top">
                    <DYNAMIC TAG>
                        <table width="195" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td><img src="images/image.jpg"/></td>
                              </tr>
                                  <tr>
                                    <td>Title </td>
                                  </tr>
                              <tr>
                                <td>Text</td>
                              </tr>
                                  <tr>
                                    <td><a href="#">Read More</a></td>
                                  </tr>
                         </table>
                       </DYNAMIC TAG>  
                    </td>
                    <td width="23">&nbsp;</td>
                        <td width="195" valign="top">
                          <DYNAMIC TAG>
                            <table width="195" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td><img src="images/image.jpg"/></td>
                                  </tr>
                                      <tr>
                                        <td>Title </td>
                                      </tr>
                                  <tr>
                                    <td>Text</td>
                                  </tr>
                                      <tr>
                                        <td><a href="#">Read More</a></td>
                                      </tr>
                             </table>
                          </DYNAMIC TAG>  
                            </td>
             </tr>
        </table>

我希望我很清楚,一切都有意义,我已经帮助你了。

度过美好的一天,

爱莲。

1 个答案:

答案 0 :(得分:0)

最终故事只能与内容本身一样长,但是表格行会使该行中的所有单元格保持相同的高度:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" bgcolor="#858585" valign="top">Section 1

    </td>
    <td width="200" bgcolor="#656565" valign="top">Section 2

    </td>
    <td width="200" bgcolor="#454545" valign="top">Section 3<br>
      This sets the height of all 3.<br>...<br>...<br>...<br>...
    </td>
  </tr>
</table>

您当前正在每个表格单元格中嵌套一个表格 - 该表格是独立的,因此它们将根据需要进行扩展,从而导致3个表格具有不同的高度。除非您向表格添加背景颜色或边框,否则这将是不可见的。在这种情况下,不是将其应用于嵌套表,而是将其应用于父表单元格。

如果您希望所有内容在等高表格单元格的底部“浮动”,请将每个单元格的valign属性更改为valign="bottom"


更新: 感谢您的澄清 - 问题是您想要在同一个单元格中的顶部和底部进行操作,这是无法完成的。也不支持强制100%高度,因此嵌套100%高度表和2行(内容然后读取我)将不起作用。

我有两种方法可以想到(除了设定固定的高度)。一个是非常直接的,一个是更开箱即用的想法。

方法1:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" bgcolor="#858585" valign="top">Section 1<br>...<br>...<br>...

    </td>
    <td width="200" bgcolor="#656565" valign="top">Section 2<br>...<br>...

    </td>
    <td width="200" bgcolor="#454545" valign="top">Section 3<br>
      This sets the height of all 3.<br>...<br>...<br>...<br>...<br>&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#858585" valign="top">Read More
    </td>
    <td width="200" bgcolor="#656565" valign="top">Read More
    </td>
    <td width="200" bgcolor="#454545" valign="top">Read More
    </td>
  </tr>
</table>

使用此方法的缺点是,您的自述链接不会立即跟随代码中的故事。

方法2:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" bgcolor="#858585" valign="top">Section 1<br>...<br>...<br>...

    </td>
    <td width="400" valign="top" rowspan="2">
      <table width="400" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="200" bgcolor="#656565" valign="top">Section 2<br>...<br>...

          </td>
          <td width="200" valign="top" rowspan="2">
            <table width="200" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="200" bgcolor="#454545" valign="top">Section 3<br>
                  This sets the height of all 3.<br>...<br>...<br>...<br>...<br>
                </td>
              </tr>
              <tr>
                <td width="200" bgcolor="#454545" valign="bottom">Read More
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td width="200" bgcolor="#656565" valign="bottom">Read More
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#858585" valign="bottom">Read More
    </td>
  </tr>
</table>

这些表是嵌套的,因此它们由'孙子'或预定的最大值驱动。缺点是,只有当您知道哪个部分最大时,这才有效。设置这个特定示例的方式,第三个表需要比前两个更多的内容,但你也可以用其他部分构建它,这个部分是“总是最大的”。

我确信这两个选项都不理想,但遗憾的是,对于跨客户端支持的html-email的限制,这是最好的选择。