0

Прошу помочь сделать нормальное html письмо с такими shape'ами, как в макете. По возможности, надо чтобы был inline css.

<div style="max-width:700px;margin:0 auto;border-radius:4px;">
  <table style="font-size:0px;background:#ffffff" align="center">
    <tr>
      <td style="padding:50px 50px 25px 50px">
        <div style="color:#737f8d;font-family:'Roboto',sans-serif;line-height:22px;text-align:center">
          <h2 style="font-weight:500;font-size:20px;color:#4f545c; margin-bottom: 45px">Здравствуйте, Alexey Bahmetov!</h2>
          <p style="font-weight:300; font-size:15px;">Наша команда поддержки ответила на ваш запрос!<br>Ответ вы можете прочитать ниже</p>
        </div>
      </td>
    </tr>

Здесь начинается проблема с этими shapes:

    <tr>
      <td>
        <div class="container">
          <div class="element">
            Спасибо вам за обращение в нашу службу поддержки!

            Неделю назад, а конкретнее 05/04/2020, вы обратились к нам с данной ошибкой. Мы проверили вашу активность и транзакции за последний месяц, данной ошибки не было обнаружено. Возможно были допущены какие-то ошибки. Попробуйте всё
            перепроверить и если ошибка останется, напишите нам снова!

            С уважением,
            Upskill Support
          </div>
        </div>
      </td>
    </tr>

Здесь заканчивается проблема с shapes.

    <tr>
      <td style="padding:40px 50px">
        <p style="border-top:1px solid #dcddde;"></p>
      </td>
    </tr>
    <tr>
      <td style="padding:0px 0px 40px 0px">
        <p style="color:#747f8d;font-family:'Roboto',sans-serif;font-size:13px;line-height:20px;text-align:center;font-weight:300;">
          Хотите оставить отзыв? Оставьте нам отзыв на нашей <a href="#" style="color:#7289da">feedback page</a>.<br>
          Нужна помощь? <a href="#" style="color:#7289da">Свяжитесь с нашей support team</a> или в Twitter <a href="#" style="color:#7289da">@Upskill</a>.</p>
      </td>
    </tr>
  </table>
</div>

Так выглядит неготовая версия

[![Так выглядит макет][2]][2]

Так выглядит макет


Вопрос решён, я просто скопировал как на stackoverflow сделано)

2
  • Добрый день, спасибо что уделили свое время на мой вопрос. Код добавил
    – genryeiter
    15 апр 2020 в 7:37
  • у Вас в table style=font-size:0px, в других местах вы его переопределяете, а в контейнере нет)
    – uGame
    16 апр 2020 в 4:45

1 ответ 1

1

Используйте свойство outline с outline-offset а не shape внутри shape, будет работать и с inline блоками, но нужно учитывать что ширина outline и его отступ не засчитывается в размер блока.

.container {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 5px;
}
<div class="container"></div>

Но можно и shape внутри shape. Но блок с текстом должен быть inline-block, иначе border не встанет

.container {
  max-width: 305px;
  padding: 5px;
  border: 1px solid red
}

.element {
  display: inline-block;
  padding: 5px;
  border: 1px solid black
}
<div class="container">
  <div class="element">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

Ответ на дополнение к вопросу

<div style="max-width:700px;margin:0 auto;border-radius:4px;">
  <table style="background:#ffffff" align="center">
  <!-- Шапка -->
    <tr>
      <td style="padding:50px 50px 25px 50px">
        <div style="color:#737f8d;font-family:'Roboto',sans-serif;line-height:22px;text-align:center">
          <h2 style="font-weight:500;font-size:20px;color:#4f545c; margin-bottom: 45px">Здравствуйте, Alexey Bahmetov!</h2>
          <p style="font-weight:300; font-size:15px;">Наша команда поддержки ответила на ваш запрос!<br>Ответ вы можете прочитать ниже</p>
        </div>
      </td>
    </tr>
    
  <!-- Наши shape in shape -->
    <tr>
      <td>
        <div style="border: 2px solid #EFF0F2; padding: 10px; border-radius: 5px;">
          <div style="background-color:#EFF0F2;font-family:'Roboto',sans-serif; padding: 50px; border-radius: 5px; color:#4f545c;font-weight:500">
            <span style="font-size:20px">Спасибо вам за обращение в нашу службу поддержки!</span><br><br>
            <span style="font-size:16px">Неделю назад, а конкретнее 05/04/2020, вы обратились к нам с данной ошибкой. Мы проверили вашу активность                   и транзакции за последний месяц, данной ошибки не было обнаружено. Возможно были допущены какие-то ошибки. Попробуйте всё
                  перепроверить и если ошибка останется, напишите нам снова! <br><br>С уважением, Upskill Support
            </span>
          </div>
        </div>
      </td>
    </tr>
    
  <!-- Линия -->
    <tr>
      <td style="padding:40px 50px">
        <p style="border-top:1px solid #dcddde;"></p>
      </td>
    </tr>
    
  <!-- Подвал -->
    <tr>
      <td style="padding:0px 0px 40px 0px">
        <p style="color:#747f8d;font-family:'Roboto',sans-serif;font-size:13px;line-height:20px;text-align:center;font-weight:300;">
          Хотите оставить отзыв? Оставьте нам отзыв на нашей 
          <a href="#" style="color:#7289da">feedback page</a>.<br> Нужна помощь? 
          <a href="#" style="color:#7289da">Свяжитесь с нашей support team</a> или в Twitter <a href="#" style="color:#7289da">@Upskill</a>.</p>
      </td>
    </tr>
    
  </table>
</div>

2
  • Добрый день, спасибо что выделили своё время на мой вопрос. Я попробовал ваш код, но он не сработал. Я пишу html письмо, а там надо использовать table-tr-td и только потом в них писать div. Если использовать его в чистом документе только с div, то тогда он правильно работает, в моем случае он не выдает текст. Можете ли мне помочь? Код должен выглядеть примерно так: <tr> <td> <div class="container"> <div class="element"> ...
    – genryeiter
    15 апр 2020 в 7:31
  • Добавил к ответу решение, если еще актуально) Просто в table было указано font-size:0)
    – uGame
    16 апр 2020 в 5:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.