две колонки с фоновым изображением в outlook - PullRequest
Новая
       15

две колонки с фоновым изображением в outlook

0 голосов
/ 04 июля 2019

Я хочу создать две таблицы, которые расположены рядом друг с другом в outlook, и их следует поместить в таблицу с фоновым изображением.

Я знаю, что можно создать фоновое изображение в электронном письме outlook.как это: 

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" src="image.jpg" color="#F4C046" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
    <table width="100%" align="center"  border="0" cellpadding="0" cellspacing="0" >
        <tr>
            <td align="center">
             <!-- place content here -->
            </td> 
        </tr>
     </table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Я также знаю, что можно создать дизайн таблицы с двумя столбцами следующим образом: 

<table width="600" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td>
      <table class="full-width" width="295" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
          <td align="left" style="font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: #000; line-height: 24px;">
            hi
          </td>
        </tr>
      </table>

      <table class="full-width" width="295" align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
          <td align="center">
            <img class="img-full" src="image_1.jpg" alt="img" width="295" height="250">
          </td>
        </tr>
      </table>
</table>

Однако, когда я помещаю вышеупомянутую таблицу в <!-- place content here -->, тогдафон работает, но две таблицы расположены не рядом, а друг под другом.

Можно ли заставить обе работать в перспективе?

Я не хочу создаватьОдна таблица с двумя столбцами, потому что она должна быть отзывчивой в дополнение.Когда у меня есть две таблицы, я могу просто установить ширину таблиц на 100% с помощью медиазапросов.

Я также попытался использовать плавающие значения для этих двух таблиц, как описано в Как получить две таблицы длявыравнивать рядом друг с другом? , но это также игнорируется в Outlook.

Ответы [ 3 ]

1 голос
/ 04 июля 2019

У вас есть два варианта:

  1. Использовать таблицы-призраки. Причина, по которой ваши таблицы складываются в Outlook, заключается в том, что вы не придерживаетесь правила Outlook о разнице между таблицами в 20 пикселей. Глупое правило, но это известная проблема.
  2. Уменьшите ширину ваших таблиц, чтобы придерживаться правила Outlook до 20 пикселей. Так что сделайте обе внутренние таблицы, 290px. Таким образом, вам не понадобятся таблицы Ghost. Но это влияет на ширину, доступную для содержимого внутри этих таблиц.

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

0 голосов
/ 08 июля 2019

Я взял ваш код и внес в него изменения.

  • Добавлена ​​новая таблица, чтобы обернуть ваши два столбца.
  • Добавлен столбец Ghost для поддержки Outlook
  • Добавлена ​​новая таблица для включения VML и блока из двух столбцов
  • Добавлены ширина и высота к вашему VML 

@media only screen and (max-width : 480px) {
    .full-width{width:100% !important}
}
<table width="600" border="0" cellspacing="0" cellpadding="0" class="full-width">
  <tbody>
    <tr>
      <td><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;width:600px;height:250px;">
<v:fill type="frame" src="image.jpg" color="#F4C046" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
        
        <table width="600" border="0" cellpadding="0" cellspacing="0" class="full-width">
          <tr>
            <td><table class="full-width" width="300" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                <tr>
                  <td align="left" style="font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: #000; line-height: 24px;"> hi </td>
                </tr>
              </table>
              
              <!--[if (gte mso 9)|(IE)]> </td><td align="left" valign="top" width="300"> <![endif]-->
              
              <table class="full-width" width="300" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                <tr>
                  <td align="center"><img class="img-full" src="image_1.jpg" alt="img" width="295" height="250"></td>
                </tr>
              </table>
          </tr>
        </table>
        
        <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
    </tr>
  </tbody>
</table>

Я не проверял ваш VML, поскольку он имеет относительный путь

После того, как вы проверили приведенный выше код, сообщите мне, работает ли он для вас.

0 голосов
/ 04 июля 2019

То, что фактически делает Outlook, если вы посмотрите внимательно, создает «текстовое поле», и все, что там происходит, превращается в изображение. Так что, хотя этот метод дает вам иллюзию фонового изображения в перспективе, на самом деле это иллюзия. Тебе лучше сделать изображение и использовать его. Вероятно, поэтому ваши таблицы запутались. Я не рекомендую использовать этот метод для чего-либо, кроме очень простых фоновых изображений.

...