Установка порядка наложения контента на мобильных устройствах (HTML электронных писем) - PullRequest
Новая
       70

Установка порядка наложения контента на мобильных устройствах (HTML электронных писем)

1 голос
/ 13 июля 2020

Я сейчас создаю электронное письмо, но мне очень трудно установить порядок стека определенного контента, когда он отображается на мобильном устройстве.

Например, один из моих блоков контента есть блок текста слева, а затем изображение справа. В другом блоке содержимого у меня есть изображение слева и блок текста справа. Но в обоих этих блоках содержимого текстовый блок и изображение станут полноразмерными на мобильных устройствах, разместив их в отдельных строках. Я бы хотел, чтобы сначала отображался текст, а затем изображение, и я хотел бы, чтобы это было для обоих разделов.

Кто-нибудь сможет предложить какие-нибудь CSS, которые могли бы сделать это? Люди предлагали Z-Index, но я знаю, что мне это не подходит. Если только я не использовал его неправильно!

К сожалению, я не могу поделиться скриншотами или кодом, так как это не мой адрес электронной почты и он принадлежит клиенту.

Ответы [ 2 ]

0 голосов
/ 03 августа 2020

Вы можете изменить порядок расположения содержимого по умолчанию, используя свойство dir = "rtl" в таблице, порядок расположения которой вы хотите изменить. Этот метод задокументирован среди других мест здесь . Существует также широко используемый шаблон, демонстрирующий эту технику , здесь . Фрагмент кода для таблицы, использующей этот метод, включен ниже - полный пример, включая CSS, см. По ссылке на шаблон Cerberus выше. Примечание. Поддержка устройств электронной почты HTML постоянно меняется, поэтому перед отправкой рекомендуется протестировать это решение в службе тестирования электронной почты, такой как Email on Acid или Litmus. 

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: auto;" class="email-container">
        <!-- Thumbnail Right, Text Left : BEGIN -->
        <tr>
            <td dir="rtl" width="100%" style="padding: 10px; background-color: #ffffff;">
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <!-- Column : BEGIN -->
                        <th width="33.33%" class="stack-column-center">
                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td dir="ltr" valign="top" style="padding: 0 10px;">
                                        <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="center-on-narrow" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <!-- Column : END -->
                        <!-- Column : BEGIN -->
                        <th width="66.66%" class="stack-column-center">
                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow">
                                        <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
                                        <p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                                        <!-- Button : BEGIN -->
                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
                                            <tr>
                                                <td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
                                                    <a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- Button : END -->
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <!-- Column : END -->
                    </tr>
                </table>
            </td>
        </tr>
        <!-- Thumbnail Right, Text Left : END -->
    </table>
0 голосов
/ 13 июля 2020

Вы можете попробовать обратное наложение таблиц, объединив таблицы фиксированной ширины и align. Атрибут align разместит их на рабочем столе (текст слева и изображение справа), а затем установка width:100% !important для мобильных представлений заставит их складываться в порядке html (изображение поверх мобильного) 

<table width="600" class="full-width">
  <tr>
    <td>

      <table width="280" align="right" class="full-width">
        <tr>
          <td>image</td>
        </tr>
      </table>

      <table width="280" align="left" class="full-width">
        <tr>
          <td>text</td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Если вы используете th или td и хотите изменить порядок наложения. Вы можете использовать эти значения display в ячейке display: table-header-group (перемещается в верхнюю часть таблицы - ваше изображение) и display: table-footer-group (перемещается в нижнюю часть таблицы - ваш текст). 

<table>
  <tr>
    <th class="display-table-footer">text</th>
    <th class="display-table-header">image</th>
  </tr>
</table>
...