Давайте представим ситуацию, вы работаете над шаблоном вашего письма, хотите заполнить его карточками продуктов.
Итак, Вы добавили эти карточки продуктов в письмо и видите следующую картинку - контейнеры не выровнены по вертикали, как предполагалось.
Давайте разберем на примере нашего кейса:
Как видите, контейнеры разные по длине, первый длиннее, а второй наоборот короче. Цены и кнопки не на одном уровне.
Не переживайте, у меня есть хорошие новости, мы можем исправить данную ситуацию и применить вертикальное выравнивание для контейнеров.
У нас есть 2 варианта, как это сделать:
Вариант №1:
Используйте блок разделителя для вертикального выравнивания.
Давайте перетащим блок разделителя под наш текстовый блок;
активируйте контрол «Динамическая разделитель» и растяните разделитель до нужной высоты;
сделано! Теперь наши контейнеры на одном уровне.
Вариант №2:
Исправление высоты контейнера с помощью редактора кода.
Выделите нужный блок, для которого вы хотите задать высоту (в нашем случае я хочу задать высоту для блока с описанием) и откройте редактор кода;
добавьте в код height = "189", число в скобках можно заменить на свое;
Обратите внимание, вы можете узнать высоту каждого элемента с помощью панели разработчика/dev tools.
На примере нашего кейса, я хочу проверить высоту данного первого блока с описанием.
Как это сделать? Легко, перейдите в режим предварительного просмотра письма, откройте панель разработчика, для этого нажмите кнопку F12 на клавиатуре.
Наведите указатель мыши на нужный блок, и вы увидите его высоту.
Теперь вы знаете, почему я проставила именно 189 пикселей для второго контейнера.
чтобы выровнять текст по верхнему краю, добавьте в код valign = "top";
готово, наши контейнеры выровнялись.
Если у Вас появятся дополнительные вопросы, пожалуйста, напишите нам на почту support@stripo.email.