Невозможно выровнять строки текста, если в одной строке меньше текста - PullRequest
0 голосов
/ 18 марта 2019

Я пишу HTML для электронной почты, один раздел электронной почты в настоящее время выглядит следующим образом.Проблема в том, что последний ряд имеет странное выравнивание.Как ни странно, единственное решение, которое я нашел, это добавить текст в последнюю строку.Но мне не нравится это решение.

Example of output

Вот точный код, использованный для создания вывода выше в Chrome.

<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;" width="600">

<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 35px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
      <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
  <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">imperdiet</span>
    – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, lacus dictum ornare elementum, magna eros cursus lectus, sed ullamcorper mi diam vehicula augue.
  </span> 
  </td>
</tr>  
</table>
</center>
</td>
</tr>

<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
    <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
      <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">Phasellus</span>
        – Vestibulum cursus elit vel urna lacinia feugiat. Maecenas vel varius eros. Maecenas vel mattis sem. Proin ac mauris quis elit suscipit tristique eu eu risus
    </span>  
  </td> 
</tr>
</table>
</center>
</td>
</tr>


<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
    <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
      <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
        – Ut commodo tincidunt dictum. In hendrerit
      </span>
  </td>
</tr>   
</table>
</center>
</td>
</tr>
</table>

Обратите внимание, что это не обычный HTML, а HTML, используемый специально для электронной почты (отсюда и уродство)

Ответы [ 3 ]

1 голос
/ 18 марта 2019

Добавьте заданную ширину для ячеек таблицы.Это исправит вашу проблему!

<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;" width="600">

<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 35px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
      <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
  <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">imperdiet</span>
    – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, lacus dictum ornare elementum, magna eros cursus lectus, sed ullamcorper mi diam vehicula augue.
  </span> 
  </td>
</tr>  
</table>
</center>
</td>
</tr>

<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
    <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
      <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">Phasellus</span>
        – Vestibulum cursus elit vel urna lacinia feugiat. Maecenas vel varius eros. Maecenas vel mattis sem. Proin ac mauris quis elit suscipit tristique eu eu risus
    </span>  
  </td> 
</tr>
</table>
</center>
</td>
</tr>


<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
    <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
      <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
        – Ut commodo tincidunt dictum. In hendrerit
      </span>
  </td>
</tr>   
</table>
</center>
</td>
</tr>
</table>
0 голосов
/ 18 марта 2019

Еще один способ исправить это - просто вставить «padding-left: 18%» в тэг строки таблицы «tr». Так как изменение отступа не работало для тега «td» данных, следующая вещь, которую нужно попробовать, это переместить то, что видно как всю строку. Таким образом, пересмотренный код для раздела изложения будет таким, как указано ниже.

<tr style="padding-left: 18%; color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style=" padding-right: 18%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
    <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
      <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
        – Ut commodo tincidunt dictum. In hendrerit.
    </span>  
  </td> 
</tr>
</table>
</center>
</td>
</tr>


</table>
0 голосов
/ 18 марта 2019

Если вы установите элементы <td> первого уровня на display: block;, это исправит вашу проблему.

...