Этот вопрос относится к HTML электронной почты и должен работать во всех распространенных почтовых клиентах.
У меня есть макет с тремя столбцами, который при просмотре на мобильном устройстве превращается в макет с одним столбцом.
На рабочем столе клиент хотел бы, чтобы последний элемент каждого столбца (кнопка) был выровнен по вертикали. Это означает, что все кнопки должны быть на одной высоте, независимо от длины текста над ним.
Поскольку это электронное письмо, я ограничен в том, какой CSS я использую. Я не могу, например, использовать положение
Я создаю шаблон для частого использования, то есть он должен выглядеть так, как описано, независимо от длины используемого текста и без необходимости каждый раз изменять CSS.
Я вполне уверен, что, поскольку это должно быть отзывчивым, то есть я должен создавать независимые таблицы, нет хорошего способа сделать это, но я хотел бы услышать идеи. Вот что я придумал и почему он не подходит:
Создайте две совершенно разные таблицы для настольных и мобильных компьютеров и скройте их соответственно. Это будет работать легко, но требование о том, что один и тот же контент должен быть введен в двух местах, является неприемлемым для агентства.
Дайте ячейкам, содержащим абзац текста, минимальную высоту. Это просто не работает во многих почтовых клиентах, а также, так как я не знаю, как долго будет каждый раз текст, я не могу действительно выбрать высоту. Даже если клиент позаботится о том, чтобы все три статьи были одинаковой длины, я мог бы иметь встроенные лишние пробелы.
Дайте ячейкам фиксированную высоту и скажите клиенту, что они не могут превышать определенное количество символов. Это лучшее, что я могу придумать, и мне остается только надеяться, что они не пойдут слишком долго под этим символом.
Вот код, который я использую: https://codepen.io/Nomi1138/pen/WLqapN
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet">
<title></title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
table { margin:0; padding:0; border-spacing:0; border:none; border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; }
td { font-family: Arial, Helvetica, 'sans-serif'; mso-line-height-rule:exactly; }
:link { color:#000000; }
:visited { color:#000000; }
.no-link-000000, .no-link-000000 a {
color:#000000!important;
text-decoration:none!important;
cursor:text!important; }
.no-link-888888, .no-link-888888 a {
color:#888888!important;
text-decoration:none!important;
cursor:text!important; }
span.preheader { display: none !important; color:#ffffff!important;}
@media handheld, screen and (max-width: 430px) {
.m-display-block { display:block!important; }
.m-display-none { display:none!important; }
.m-display-inline { display:inline!important; }
.m-float-none { float:none!important; }
.m-min-width-320px { min-width:320px!important; }
.m-min-height-auto { min-height: auto!important; }
.m-height-auto { height: auto!important; }
.m-width-320px { width:320px!important; }
.m-width-300px { width:300px!important; }
.m-width-290px { width:290px!important; }
.m-width-285px { width:285px!important; }
.m-width-283px { width:283px!important; }
.m-width-280px { width:280px!important; }
.m-width-272px { width:272px!important; }
.m-width-260px { width:260px!important; }
.m-width-242px { width:242px!important; }
.m-width-232px { width:232px!important; }
.m-width-229px { width:229px!important; }
.m-width-227px { width:227px!important; }
.m-width-210px { width:210px!important; }
.m-width-209px { width:209px!important; }
.m-width-200px { width:200px!important; }
.m-width-190px { width:190px!important; }
.m-width-180px { width:180px!important; }
.m-width-175px { width:175px!important; }
.m-width-151px { width:151px!important; }
.m-width-110px { width:110px!important; }
.m-width-71px { width:71px!important; }
.m-width-60px { width:60px!important; }
.m-width-50px { width:59px!important; }
.m-width-25px{ width:25px!important; }
.m-width-20px{ width:20px!important; }
.m-width-15px{ width:15px!important; }
.m-width-10px{ width:10px!important; }
.m-width-0 {width:0px!important;}
.m-height-322px {height:322px!important;}
.m-height-318px {height:318px!important;}
.m-height-290px {height:290px!important;}
.m-height-251px {height:251px!important;}
.m-height-170px {height:170px!important;}
.m-height-151px {height:151px!important;}
.m-height-48px {height:48px!important;}
.m-height-40px {height:40px!important;}
.m-height-29px {height:29px!important;}
.m-height-20px {height:20px!important;}
.m-height-auto {height:auto:!important;}
.m-padding-0-0-0-0{padding: 0px 0px 0px 0px!important;}
.m-padding-top-70px { padding-top:70px!important; }
.m-padding-top-45px { padding-top:45px!important; }
.m-padding-top-25px { padding-top:25px!important; }
.m-padding-top-20px { padding-top:20px!important; }
.m-padding-top-15px { padding-top:15px!important; }
.m-padding-top-13px { padding-top:13px!important; }
.m-padding-top-10px { padding-top:10px!important; }
.m-padding-top-8px { padding-top:8px!important; }
.m-padding-top-5px { padding-top:5px!important; }
.m-padding-top-0 { padding-top:0!important; }
.m-padding-right-50px { padding-right:50px!important; }
.m-padding-right-40px { padding-right:40px!important; }
.m-padding-right-30px { padding-right:30px!important; }
.m-padding-right-25px { padding-right:25px!important; }
.m-padding-right-20px { padding-right:20px!important; }
.m-padding-right-15px { padding-right:15px!important; }
.m-padding-right-10px { padding-right:10px!important; }
.m-padding-right-5px { padding-right:5px!important; }
.m-padding-right-0 { padding-right:0!important; }
.m-padding-bottom-70px { padding-bottom:70px!important; }
.m-padding-bottom-40px { padding-bottom:40px!important; }
.m-padding-bottom-30px { padding-bottom:30px!important; }
.m-padding-bottom-25px { padding-bottom:25px!important; }
.m-padding-bottom-20px { padding-bottom:20px!important; }
.m-padding-bottom-15px { padding-bottom:15px!important; }
.m-padding-bottom-13px { padding-bottom:13px!important; }
.m-padding-bottom-10px { padding-bottom:10px!important; }
.m-padding-bottom-8px { padding-bottom:8px!important; }
.m-padding-bottom-5px { padding-bottom:5px!important; }
.m-padding-bottom-0 { padding-bottom:0!important; }
.m-padding-left-50px { padding-left:50px!important; }
.m-padding-left-45px { padding-left:45px!important; }
.m-padding-left-42px { padding-left:42px!important; }
.m-padding-left-40px { padding-left:40px!important; }
.m-padding-left-30px { padding-left:30px!important; }
.m-padding-left-25px { padding-left:25px!important; }
.m-padding-left-20px { padding-left:20px!important; }
.m-padding-left-15px { padding-left:15px!important; }
.m-padding-left-13px { padding-left:13px!important; }
.m-padding-left-10px { padding-left:10px!important; }
.m-padding-left-5px { padding-left:5px!important; }
.m-padding-left-0 { padding-left:0!important; }
.m-font-size-40px { font-size:40px!important; }
.m-font-size-32px { font-size:32px!important; }
.m-font-size-30px { font-size:30px!important; }
.m-font-size-24px { font-size:24px!important; }
.m-font-size-18px { font-size:18px!important; }
.m-font-size-16px { font-size:16px!important; }
.m-font-size-15px { font-size:15px!important; }
.m-font-size-14px { font-size:14px!important; }
.m-font-size-12px { font-size:12px!important; }
.m-font-size-10px { font-size:10px!important; }
.m-font-weight-bold {font-weight: bold!important;}
.m-line-height-40px { line-height:40px!important;}
.m-line-height-32px { line-height:32px!important;}
.m-line-height-30px { line-height:30px!important;}
.m-line-height-24px { line-height:24px!important;}
.m-line-height-20px { line-height:20px!important;}
.m-line-height-16px { line-height:16px!important;}
.m-textalign-left {text-align:left!important;}
.m-textalign-center {text-align:center!important;}
.m-textalign-left {text-align:left!important;}
.m-border-top-00827b-6px {border-top: 6px solid #00827b!important;}
.m-border-bottom-169d99-11px {border-bottom: 11px solid #169d99!important;}
.m-border-top-169d99-11px {border-top: 11px solid #169d99!important;}
.m-border-bottom-00827b-11px {border-bottom: 11px solid #00827b!important;}
.m-border-top-00827b-11px {border-top: 11px solid #00827b!important;}
.m-border-top-ffffff-1px {border-top: 1px solid #ffffff!important;}
.m-border-top-23a29f-1px {border-top: 1px solid #23a29f!important;}
.m-border-0 {border:none!important;}
.m-border-radius-40px { border-radius:55px!important; }
.m-bgcolor-169d99 { background-color:#169d99!important;}
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style type="text/css">
sup { font-size:78%!important; line-height:78%!important; }
sup small { font-size:100% !important; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
sup { font-size:78%!important; line-height:78%!important; }
sup small { font-size:100% !important; }
</style>
<![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td, p, a, span {font-family: Arial, Helvetica, 'sans-serif'!important;}
</style>
<![endif]-->
</head>
<body style="margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<custom name="opencounter" type="tracking" />
<span class="preheader" style="line-height:0; height:0px; font-size:0px; color:#ffffff; display:none;">
<!--[if !mso 9]><!-->
<!--<![endif]-->
</span>
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#d4d8dc" style="width:100%; background-color:#d4d8dc;">
<tr>
<td align="center" style="display:none; font-size:1px; color:#feffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; width: 1101px;">
</td>
</tr>
<tr>
<td align="center" valign="top" style="width: 1101px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:430px; min-width:430px;" class="m-width-320px m-min-width-320px">
<tr>
<td align="center" valign="top" bgcolor="#ffffff">
<!-- start three column layout, turns into one column on mobile -->
<table border="0" cellpadding="0" cellspacing="0" style="width:430px;" class="m-width-320px">
<tr>
<td align="left" valign="top">
<!-- Start: Outer container table with padding and separator -->
<table border="0" cellpadding="0" cellspacing="0" align="center" class="m-width-320px" style="width:430px; border-spacing:0; border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0;">
<tr>
<td align="center" valign="top" style="padding-top:25px;" class="m-padding-top-15px">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="m-width-320px" style="width:430px;border-spacing:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="20" class="m-display-none" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"></td>
<td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
<!-- Start: Column 1 -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="m-width-320px" style="width:123px;border-spacing:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td align="left" valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;" class="m-padding-left-20px m-padding-right-15px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" style="width:123px;" class="m-display-none m-width-0">
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0px 0 15px 0px; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size:10px; line-height:15px; color:#231f20; height: 280px" class="m-font-size-14px m-line-height-20px m-padding-bottom-25px m-height-auto">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem ipsa quae ab illo inve ntore veritatis et quasi archite cto beatae vitae dicta sunt expl icabo nemo enim ipsam. vo lupt atem quia voluptas sit unt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0 0 20px 0;" class="m-padding-left-45px">
<!-- Button : BEGIN -->
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="25" align="center" style="background: #6e1448; text-align: center; height: 25px; border-radius:25px; padding: 0 3px 0 3px;" class="m-height-40px m-border-radius-40px m-width-190px">
<a href="#" target="_blank" style="padding: 0 10px 0 10px; background: #6e1448; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size: 8px; line-height: 16px; text-align: center; text-decoration: none; display: block; font-weight: bold;" class="m-width-180px m-padding-right-0 m-padding-left-0 m-font-size-14px">
<span style="color:#ffffff;">CALL TO ACTION</span> <span style="font-size:12px; color:#ffffff;" class="m-font-size-18px">›</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Column 1 -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"><![endif]-->
<!-- Start: Separator table -->
<table border="0" cellspacing="0" cellpadding="0" align="left" class="m-display-none" style="width:11px;border-spacing:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="m-display-none" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"> </td>
</tr>
</table>
<!-- End: Separator table -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"><![endif]-->
<!-- Start: Column 2 -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="m-width-320px" style="width:123px;border-spacing:0; border-collapse:collapse; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td align="left" valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;" class="m-padding-left-20px m-padding-right-15px">
<table border="0" cellpadding="0" cellspacing="0">
<!--[if !mso 9]><!-->
<tr>
<td align="center" valign="top" style="width:0px; height: 0px; padding:0;" class="m-padding-top-20px m-width-285px">
<img src="http://image.s6.exacttarget.com/lib/fe9712727265077e77/m/4/f3006535-cdbe-459f-8609-67e2ec043448.png" alt="" border="0" style="display: none; border: none; height:0px; font-family: Arial, Helvetica, 'sans-serif'; font-size:10px; color:#999999;" class="m-display-block m-height-151px m-width-151px">
</td>
</tr>
<!--<![endif]-->
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0px 0 15px 0px; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size:10px; line-height:15px; color:#231f20; height: 280px" class="m-font-size-14px m-line-height-20px m-padding-bottom-25px m-height-auto">
Sed ut perspiciatis unde omnis iste natus errosantium doloremque lau dantium, totam rem aperiam, eaque ipsa quae ab illo inve ntore veritatis et quasi archite cto beatae vitae dicta sunt expl icabo nemo enim ipsam. vo lupt atem quia voluptas sit unt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0 0 20px 0;" class="m-padding-left-45px">
<!-- Button : BEGIN -->
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="25" align="center" style="background: #6e1448; text-align: center; height: 25px; border-radius:25px; padding: 0 3px 0 3px;" class="m-height-40px m-border-radius-40px m-width-190px">
<a href="#" target="_blank" style="padding: 0 10px 0 10px; background: #6e1448; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size: 8px; line-height: 16px; text-align: center; text-decoration: none; display: block; font-weight: bold;" class="m-width-180px m-padding-right-0 m-padding-left-0 m-font-size-14px">
<span style="color:#ffffff;">CALL TO ACTION</span> <span style="font-size:12px; color:#ffffff;" class="m-font-size-18px">›</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Column 2 -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"><![endif]-->
<!-- Start: Separator table -->
<table border="0" cellspacing="0" cellpadding="0" align="left" class="m-display-none" style="width:11px;border-spacing:0; border-collapse:collapse; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="m-display-none" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"> </td>
</tr>
</table>
<!-- End: Separator table -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"><![endif]-->
<!-- Start: Column 3 -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="m-width-320px" style="width:123px;border-spacing:0; border-collapse:collapse; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td align="left" valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;" class="m-padding-left-20px m-padding-right-15px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0px 0 15px 0px; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size:10px; line-height:15px; color:#231f20; height: 280px;" class="m-font-size-14px m-line-height-20px m-padding-bottom-25px m-height-auto">
Sed ut perspiciatis unde omnis iste illo inve ntore veritatis et quasi archite cto beatae vitae dicta sunt expl icabo nemo enim ipsam. vo lupt atem quia voluptas sit unt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0 0 20px 0;" class="m-padding-left-45px">
<!-- Button : BEGIN -->
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="25" align="center" style="background: #6e1448; text-align: center; height: 25px; border-radius:25px; padding: 0 3px 0 3px;" class="m-height-40px m-border-radius-40px m-width-190px">
<a href="#" target="_blank" style="padding: 0 10px 0 10px; background: #6e1448; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size: 8px; line-height: 16px; text-align: center; text-decoration: none; display: block; font-weight: bold;" class="m-width-180px m-padding-right-0 m-padding-left-0 m-font-size-14px">
<span style="color:#ffffff;">CALL TO ACTION</span> <span style="font-size:12px; color:#ffffff;" class="m-font-size-18px">›</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Column 3 -->
</td>
<td width="19" class="m-display-none" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"></td>
</tr>
</table>
<!-- End: Inner content container table -->
</td>
</tr>
</table>
<!-- End: Outer container table with padding and separator -->
</td>
</tr>
</table>
<!-- end three column layout, turns into one column on mobile -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Приведенный выше код работает, но удовлетворяет требованиям клиента только в том случае, если текстовые блоки не слишком длинные или не слишком короткие.