Давайте представим ситуацию, вы работаете над шаблоном вашего письма, хотите заполнить его карточками продуктов.

Итак, Вы добавили эти карточки продуктов в письмо и видите следующую картинку - контейнеры не выровнены по вертикали, как предполагалось.

Давайте разберем на примере нашего кейса:

Как видите, контейнеры разные по длине, первый длиннее, а второй наоборот короче. Цены и кнопки не на одном уровне.

Не переживайте, у меня есть хорошие новости, мы можем исправить данную ситуацию и применить вертикальное выравнивание для контейнеров.

У нас есть 2 варианта, как это сделать:

Вариант №1:

Используйте блок разделителя для вертикального выравнивания.

  • Давайте перетащим блок разделителя под наш текстовый блок;

  • активируйте контрол «Динамическая разделитель» и растяните разделитель до нужной высоты;

  • сделано! Теперь наши контейнеры на одном уровне.

Вариант №2:

Исправление высоты контейнера с помощью редактора кода.

  • Выделите нужный блок, для которого вы хотите задать высоту (в нашем случае я хочу задать высоту для блока с описанием) и откройте редактор кода;

  • добавьте в код height = "189", число в скобках можно заменить на свое;

Обратите внимание, вы можете узнать высоту каждого элемента с помощью панели разработчика/dev tools.

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

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

Наведите указатель мыши на нужный блок, и вы увидите его высоту.

Теперь вы знаете, почему я проставила именно 189 пикселей для второго контейнера.

  • чтобы выровнять текст по верхнему краю, добавьте в код valign = "top";

  • готово, наши контейнеры выровнялись.

Если у Вас появятся дополнительные вопросы, пожалуйста, напишите нам на почту support@stripo.email.

Вы нашли ответ?