确保 TD 与电子邮件上的嵌套 DIV 保持相同大小

Question

尝试为我的电子邮件通讯的特定部分创建卡片式布局，但出于某种原因，我无法使容器与两个嵌套 div 的大小相匹配。

我主要使用的简化代码如下：（参见 jfiddle）

<table width="600px" bgcolor="#2075b9" style="text-align:center;">
    <tr>
        <td>
            <div style="background:#FFF;
                outline:1px solid #AAA;
                border-bottom:3px solid #BBB;
                padding:0px;
                margin:15px;
                overflow:hidden;
                box-sizing:border-box;">
                    <div style="display:inline-block; width:240px;" >example</div>
                    <div width="240px" style="display:inline-block;width:240px;">example</div>
            </div>
        </td>
    </tr>
</table>

如您所见，虽然每个内容 div 本身都是 240px，但应用于容器 div 的样式比它大（它填充 table 减去保证金）。

想法？

Answer 1

您需要将 display: inline-block; 添加到主 div

见updated jsfiddle

Answer 2

您只需将 display: inline-block; 应用到容器 div。 block 元素从其父元素中获取所有可能的 space。

但是：您说的是电子邮件。我不建议使用所有这些 display 东西，因为电子邮件客户端并不都允许这样做。看看https://www.campaignmonitor.com/css/b/。最好坚持像 table 结构这样的旧网站 css。

Answer 3

因为这是一份 HTML-电子邮件通讯，您需要使用 old（甚至已弃用 -for browsers) HTML，所以这是一个基于你的片段。

片段

<table width="600" bgcolor="#2075b9" align="center" border="0" cellpadding="15" cellspacing="0">
  <tr>
    <td align="center">
      <table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #bbb; border-width:1px 1px 3px">
        <tr>
          <td align="center" width="240">
            example1
          </td>
          <td align="center" width="240">
          example2
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

确保 TD 与电子邮件上的嵌套 DIV 保持相同大小

Ensure a TD stays the same size as nested DIVs on Email

html

css

html-email

片段