Достижение требуемого макета для шаблона электронной почты - PullRequest
Новая
       38

Достижение требуемого макета для шаблона электронной почты

0 голосов
/ 14 мая 2018

У меня есть некоторые проблемы с структурированием шаблона электронной почты, точнее с центрированием и особенно с его отзывчивостью из-за разметки таблицы ... это очень расстраивает, и я просто не знаю, как его структурироватьдолжным образом.Это тот тип макета, которого я хотел бы достичь - так вроде буквы:

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>

Большое спасибо за любую помощь!

1 Ответ

0 голосов
/ 14 мая 2018

Вы на правильном пути.Вам нужно посмотреть на «вложение» ваших таблиц, так как ваш текущий макет добавляет еще одну ячейку таблицы рядом с вашей копией. 

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

И только примечание, отступ / отступна h и p элементы в Outlook могут быть затруднены.Я часто просто устанавливаю margin:0 и добавляю padding к <td>.

...