實現電子郵件模板的通緝布局

Question

我在構建電子郵件模板時遇到一些問題，更確切地說是居中，尤其是由於表格布局而導致的響應能力……這非常令人沮喪，我只是不知道如何正確地構造它。 這是我希望實現的布局-有點像字母：

https://sketch.io/render/sk-4a22c73a977287e074193d5573e6db95.jpeg

如果有人有經驗，可以請他幫忙一點嗎？

這是我當前的代碼和Codepen鏈接： https ://codepen.io/anon/pen/rvKPex

<style>
    @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }

        .templateColumnContainer{
            display:block !important;
            width:100% !important;
        }

        .columnImage{
            height:auto !important;
            max-width:480px !important;
            width:100% !important;
        }

        .leftColumnContent{
            font-size:16px !important;
            line-height:125% !important;
        }

        .rightColumnContent{
            font-size:16px !important;
            line-height:125% !important;
        }
    }

    #main {
        background: url(img/bg.png);
        background-position: center;
        background-size: cover;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<table id="main" border="0" cellpadding="0" cellspacing="0" width="960" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">
                        <img src="http://placekitten.com/g/480/150" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <img src="http://placekitten.com/g/60/30" width="150" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left">
            <h1>Lorem ipsum</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
            </p>
        </td>
    </tr>
    <tr>
        <td align="center" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <img src="http://placekitten.com/g/200/50" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent" align="center">
                            <a href="www.google.com"><h2>Link here</h2></a>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

非常感謝您的幫助！

Answer 1

您走在正確的軌道上。 您需要查看“嵌套”表，因為當前布局是在副本旁邊添加另一個表單元格。

<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<!--Another td will be inserted here by browser/email rendering -->
</tr>
<tr>
<td></td>
<td></td>
</tr>

嵌套表將幫助您解決這個問題，是的，雖然有很多代碼，但是可以工作。 您的表格布局應如下所示。 這樣，每一行只有一個td單元，表中有一個表格，您可以在其中添加1/2/3列，而不會影響其他容器行。

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

另外，Outlook中的h和p元素的邊距/填充可能很困難。 我經常會設置margin:0並將padding添加到<td> 。