时间戳

首页 > 解决方案 > 你能用 HTML 表格模仿 div 的浮动右侧吗？

html - 你能用 HTML 表格模仿 div 的浮动右侧吗？

问题描述

我正在尝试为我的客户创建一个电子邮件模板。他们正在发送 HTML 时事通讯。我最初的布局很完美，只是发现 Outlook 和其他电子邮件程序（Gmail 等）不支持我需要的定位。时事通讯的整体布局如下：（原谅ASCII艺术）

---------------------------------------------------
| Header Image                      |  Email Title |
|                                   |              |
----------------------------------------------------
| Date                              | Contents     |
----------------------------------------------------
| Main Content                      | TOC          |
|                                   | Related links|
|                                   |              |
|                                   |--------------|
|                                                  |
|                                                  |
----------------------------------------------------
| Footer Info                                      |
|                                                  |
----------------------------------------------------

因为我需要使用 HTML 表格来获得此定位，所以我无法将内容包装到相关链接下的部分中。

有没有一种方法可以使用 HTML 表格来模拟带有 float:right 的 DIV 概念（我最初实现它的方式）？我现在的输出是内容保留在左侧的“主要内容”列中，并且在“相关链接”部分的右侧下方有一条长长的白色条带。

我尝试了各种 CSS 样式，但在 Outlook 或 GMail 中似乎没有正确呈现。

我一直在考虑让用户输入文本直到他们到达正确内容框的末尾，然后开始在另一个条目中输入文本，然后我将它们与 ColSpan 2 缝合在一起。但是，对我的用户来说似乎过于复杂，而且有点笨拙。

这是相当简单的标记

<table border="0" cellspacing="1" cellpadding="0" style="width:750px;">
  <tr style="height:205px">
    <td style="width:500px;">
      <img/>
    </td>
    <td style="width:250px;">
      <span>Some Title</span>
    </td>
  </tr>
  <tr style="height:22px">
    <td style="width:500px;">NewsLetter Title</td>
    <td style="width:250px;">Contents</td>
  </tr>
  <tr>
    <td style="width:500px;">
      Main content of newsletter
    </td>
    <td style="width:250px;">
      Table of Contents Related Links
    </td>
  </tr>
  <tr>
    <td colspan="2">
      Footer Info
    </td>
  </tr>
</table>

我希望主要内容区域根据需要扩展，一旦内容超出正确的“内容”部分，主要内容将流入该列。

标签： htmlcsshtml-tableoutlookhtml-email

解决方案

首先，应该指出这不是电子邮件客户端的自然行为。
你会在某个地方看到问题，因为你正在有效地破解一个解决方案。下面更详细...

需要考虑的要点：

  1. 正如我对之前的一些答案所评论的那样——Divs 可以模仿你想要的，但在 Outlook 中，divs 会爆炸到 100%。诸如计算宽度等修复不是解决此问题的解决方案。表格绝对可以完成完全相同的工作，而没有必须为 Outlook 添加诸如 Ghost 表格之类的 hack 修复程序的缺点。
  2. 尽量不要在电子邮件中使用浮点数。他们可能在某些地方工作，但不会在任何地方工作。align 属性（例如 align="right"）是您要查找的。最好在表格单元格上定义这些，里面的内容会继承这个属性，但是当单元格内有多个表格时，最好直接在元素上定义。
    您可以在下面的代码中看到这一点...我的表格在一组文本旁边。在单元格上定义对齐会强制文本右对齐，不是很好！
  3. 因为这不是自然行为，所以您会在某处看到问题。
    在下面的代码中，这消除了对浮点数、div 和计算宽度的依赖，并使用表格和固定宽度，尽管这些可以更改为百分比。
    但是，这组文本与 Outlook 中表格单元格的 colspan 和宽度混淆了。具体来说，它会吹出整个表格中的第一个单元格，因此它不遵守您定义的 316px 的固定值。

    *仅供参考 - 我已使用Litmus帐户在大型电子邮件客户端中测试此代码，包括 Gmail 网络邮件、Gmail App (iOS)、Outlook 2010/2013/2019、Outlook 网络邮件、Outlook 365、Yahoo Webmail、Outlook App (iOS)和 Apple 邮件应用程序 (iOS)。

<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000; border-collapse:collapse; width:100%;">
    <tr>
      <td style="width:316px; font-size:0; padding:0; border:1px solid #000;"><img width="316" height="159" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g" style="display:block;" /></td>
      <td style="border:1px solid #000; padding:3px;">Email Title</td>
    </tr>
      
    <tr>
      <td style="padding:3px; border:1px solid #000;">Date</td>
      <td style="padding:3px; border:1px solid #000;">Content</td>
    </tr>
    
    <tr>
      <td colspan="2" style="padding:3px; border:1px solid #000;">
          
        <table align="right" border="0" cellspacing="0" cellpadding="0" style="width:272px;">
            <tr>
                <td style="padding:3px; background:#000; color:#fff;">
                    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
                        <tr>
                            <td>
                              TOC
                            </td>
                        </tr>
                        <tr>
                            <td>
                              Related Links
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
          
        Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content
      </td>
    </tr>
      
    <tr>
      <th colspan="2" style="padding:3px; border:1px solid #000;">Footer Info</th>
    </tr>
</table>

推荐阅读