Можете ли вы имитировать плавающее право div с таблицами HTML? - PullRequest
Новая
       45

Можете ли вы имитировать плавающее право div с таблицами HTML?

0 голосов
/ 17 октября 2019

Я пытаюсь создать шаблон электронной почты для моего клиента. Они отправляют HTML-рассылку. Изначально у меня была идеальная компоновка, позволяющая узнать, что Outlook и другие почтовые программы (Gmail и т. Д.) Не поддерживают позиционирование так, как мне нужно. Общий формат новостной рассылки выглядит следующим образом: (Простите за искусство ASCII) 

---------------------------------------------------
| Header Image                      |  Email Title |
|                                   |              |
----------------------------------------------------
| Date                              | Contents     |
----------------------------------------------------
| Main Content                      | TOC          |
|                                   | Related links|
|                                   |              |
|                                   |--------------|
|                                                  |
|                                                  |
----------------------------------------------------
| Footer Info                                      |
|                                                  |
----------------------------------------------------

Поскольку мне нужно использовать таблицы HTML для получения этого позиционирования, я не могу перенести содержимое в раздел в разделе Ссылки по теме.

Есть ли способ имитировать концепцию DIV с помощью float: right (как я изначально это реализовал) с использованием таблиц HTML? Мой вывод теперь состоит в том, что содержимое остается в левом столбце «Основное содержимое», и я получаю длинную белую полосу внизу справа под разделом «Связанные ссылки».

Я пробовал различные стили CSS, но ничегоПохоже, что он правильно отображается в Outlook или GMail.

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

Это довольно простая разметка 

<table border="0" cellspacing="1" cellpadding="0" style="width:750px;">
  <tr style="height:205px">
    <td style="width:500px;">
      <img/>
    </td>
    <td style="width:250px;">
      <span>Some Title</span>
    </td>
  </tr>
  <tr style="height:22px">
    <td style="width:500px;">NewsLetter Title</td>
    <td style="width:250px;">Contents</td>
  </tr>
  <tr>
    <td style="width:500px;">
      Main content of newsletter
    </td>
    <td style="width:250px;">
      Table of Contents Related Links
    </td>
  </tr>
  <tr>
    <td colspan="2">
      Footer Info
    </td>
  </tr>
</table>

Мне бы хотелось, чтобы область основного содержимого расширялась по мере необходимости, и как только содержимое выходит за пределы правого раздела «Содержание», основное содержимое будет перетекать в этот столбец.

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

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

Обсуждаемые вопросы:

  1. Как я прокомментировал некоторые из предыдущих ответов - Div может имитировать то, что вы хотите, но в Outlook div будет выдаватьсядо 100%. Такие исправления, как ширина калькулятора и т. Д., Не являются решением этой проблемы. Таблицы будут работать точно так же, без недостатка добавления хакерских исправлений, таких как таблицы Ghost, только для Outlook.
  2. Старайтесь не использовать плавающие элементы в электронной почте. Они могут работать в некоторых местах, но не будут работать везде. Атрибут align (например, align = "right") - это то, что вы ищете. Лучше определить их для ячеек таблицы, и содержимое внутри будет наследовать это свойство, но при работе с несколькими таблицами внутри ячейки лучше определить непосредственно для элемента. Вы можете увидеть это в моем коде ниже ... Моя таблица находится рядом с группой текста. Определение выравнивания в ячейке приведет к выравниванию текста по правому краю, а не к лучшему!
  3. Поскольку это не естественное поведение, вы где-нибудь увидите проблему. В случае приведенного ниже кода это устраняет зависимость от значений типа float, divs и calc и использует таблицы и фиксированную ширину, хотя их можно изменить на проценты. Тем не менее, группа текста работает с colspan и шириной ячеек таблицы в Outlook. В частности, он выдувает первую ячейку по всей таблице, и поэтому он не придерживается фиксированного значения в 316 пикселей, которое вы определили. * К вашему сведению - я использовал учетную запись Litmus для тестирования этого кода в крупных почтовых клиентах, включая почтовую Gmail, приложение Gmail (iOS), Outlook 2010/2013/2019, веб-почту Outlook, Outlook 365, веб-почту Yahoo, Приложение Outlook (iOS) и приложение Apple Mail (iOS). 

<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000; border-collapse:collapse; width:100%;">
    <tr>
      <td style="width:316px; font-size:0; padding:0; border:1px solid #000;"><img width="316" height="159" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g" style="display:block;" /></td>
      <td style="border:1px solid #000; padding:3px;">Email Title</td>
    </tr>
      
    <tr>
      <td style="padding:3px; border:1px solid #000;">Date</td>
      <td style="padding:3px; border:1px solid #000;">Content</td>
    </tr>
    
    <tr>
      <td colspan="2" style="padding:3px; border:1px solid #000;">
          
        <table align="right" border="0" cellspacing="0" cellpadding="0" style="width:272px;">
            <tr>
                <td style="padding:3px; background:#000; color:#fff;">
                    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
                        <tr>
                            <td>
                              TOC
                            </td>
                        </tr>
                        <tr>
                            <td>
                              Related Links
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
          
        Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content
      </td>
    </tr>
      
    <tr>
      <th colspan="2" style="padding:3px; border:1px solid #000;">Footer Info</th>
    </tr>
</table>
0 голосов
/ 17 октября 2019

Без CSS вы хотели бы сделать что-то вроде: 

<table style='border:1px solid #000; border-collapse:collapse;'>
  <thead>
    <tr>
      <th style='width:316px; font-size:0; padding:0; border:1px solid #000;'><img width='316' height='159' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g' /></th>
      <th style='border:1px solid #000; padding:3px;'>Email Title</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan='2' style='padding:3px; border:1px solid #000;'>Footer Info</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td style='padding:3px; border:1px solid #000;'>Date</td>
      <td style='padding:3px; border:1px solid #000;'>Content</td>
    </tr> 
    <tr>
      <td colspan='2' style='padding:3px; border:1px solid #000;'>
        <table style='width:calc(100% - 316px); padding:3px; background:#000; color:#fff; float:right;'>
          <tbody>
            <tr>
              <td>TOC</td>
            </tr>
            <tr>
              <td>Related Links</td>
            </tr>
          </tbody>
        </table>
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
      </td>
    </tr>
  </tbody>
</table>

Конечно, вы хотите использовать CSS, если это возможно.

...