Question

我在构建电子邮件模板方面存在一些问题，更确切地说是中心化，尤其是由于桌面布局而导致的响应......这非常令人沮丧，我只是不喜欢这样做。 t有一个线索如何正确地构造它。这是我希望实现的那种布局 - 如此类似的字母：

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

你走在正确的轨道上。你需要看看嵌套＆＃39;您的表格作为当前布局在您的副本旁边添加另一个表格单元格。

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

实现电子邮件模板的通缉布局

1 个答案: