Fatal编程技术网
  • css/
  • Css HTML电子邮件-垂直对齐内容

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

css

Css HTML电子邮件-垂直对齐内容,css,html-email,vertical-alignment,Css,Html Email,Vertical Alignment,我是这个论坛的新手，我提前道歉，如果这个问题已经在其他地方解决了，我真的找不到任何有用的东西 我正在编写一个简单的HTML模板，在动态平台上使用，我的客户可以自己添加内容 模板底部有3个故事，无论每个故事的内容有多长，都必须保持垂直对齐 理想情况下，我需要更长的楼层来确定整个街区的高度 到目前为止没有问题 问题的出现是因为由于动态平台，我需要将单个故事的内容保留在特定的动态标签中，同时我需要找到一种方法，使最长的故事决定其他两个故事的高度 编辑只是为了澄清：我需要“阅读更多”单元格始终与底部对齐

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

我正在编写一个简单的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>


标题
正文
标题
正文
标题
正文
我希望我说得很清楚，一切都有道理，我已经感谢你的帮助了

祝你有愉快的一天

埃莱诺拉

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

<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>
这种方法的缺点是，您的ReadMe链接不会立即跟随代码中的故事

方法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>


第1节。。。
第二节。。。
第3节

这将设置所有3个的高度。
..
..
..
..
..

阅读更多
阅读更多
阅读更多
这些表是嵌套的，因此它们由“孙子”或预先确定的最大值驱动。缺点是，只有当您知道哪个部分将是最大的时，这才有效。按照这个特定示例的设置方式，第三个表需要比前两个表包含更多的内容，但是您也可以使用“始终最大”的其他部分来构建它

我确信这两个选项都不理想，但不幸的是，这是您在跨客户端支持的html电子邮件的限制下所能做的最好的选择。

什么是
？您好，这是一个特定于我使用的平台的标记，它允许系统用客户端内容填充模板。（我只是觉得这与问题无关）嗨，约翰，谢谢你的回答，很抱歉，我刚刚意识到我的描述不清楚。查看我的代码：我需要“阅读更多”单元格始终与底部对齐，顶部图片始终与顶部对齐，而标题和描述单元格的高度可能会有所不同。再次抱歉。我希望这能澄清。@user2919235-更新的答案。非常感谢您的回答，解决方案正是我所需要的。不幸的是，由于我必须在我的客户使用的平台上使用模板，所以故事的所有代码都需要包装在动态标记中。这样，我就不能把“阅读更多”的单元格放在不同的位置。有什么想法吗？那真的很有帮助！！再次感谢！您可以手动设置高度，并将其限制为x行文本，以符合您设定的最大高度。另一个选项是指示他们在短内容中添加


等，这样他们就可以在所有3个部分中保留文本行。因为Outlook会在没有内容的情况下剥离多个中断，所以您需要在其中使用无中断空间@USER2919235再次感谢阿尔·洛特，约翰，这是他们到目前为止所做的，但不幸的是，这不再是一个选项。我希望找到一个解决方案，让人们有不同长度的故事，设计仍然保持一致。 
<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>