1

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

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

我希望我很清楚，一切都有意义，我已经为您提供帮助。

祝你有个愉快的一天，

埃莉奥诺拉。

4

1 回答 1

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% 高度，因此嵌套 2 行（内容然后读我）的 100% 高度表将不起作用。

我可以想到两种方法（除了设置固定高度）。一种是非常直接的，一种是更开箱即用的思维。

方法一：

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

这种方法的缺点是您的自述链接不会立即跟随代码中的故事。

方法二：

<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 电子邮件的限制。

于 2013-10-25T13:38:17.807 回答