Я использовал шаблон Mailchimp. Мне нужно 9 разделов с изображениями и текстовой информацией. Я создаю 9 разделов 3x3. Я использовал опцию в построителе шаблонов, где вы можете использовать и изображение, и подпись. Подписи под изображением. Он оформлен как <td>
. Тем не менее, у меня много проблем, чтобы убедиться, что высоты одинаковы, поэтому они выглядят выровненными. Кажется, я не понимаю. Я перепутал с заполнением, я даже добавил высоту (не имел ее раньше), а также сделал overflow: hidden;
CSS ... все, но каждый раздел продолжает меняться, и он просто не выглядит выровненным. Есть ли способ исправить это?Mailchimp: Столбцы таблицы имеют разную высоту. Как я могу сделать их такими же?
Смотрите раздел моего кода, где у меня есть первый столбец (созданный вначале Mailchimp, а затем настроить мной):
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumn">
<tr>
<td valign="top" class="leftColumnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageCardBlock">
<tbody class="mcnImageCardBlockOuter">
<tr>
<td class="mcnImageCardBlockInner" style="padding-top:9px;padding-right:18px;padding-bottom:2px;padding-left:18px;">
<table align="right" border="0" cellpadding="0" cellspacing="0" class="mcnImageCardBottomContent" width="100%" height="100%" overflow="hidden" style="background-color:#2D6C73;">
<tbody>
<tr>
<td class="mcnImageCardBottomImageContent" align="left" style="padding-top:0px;padding-right:0px;padding-bottom:0;padding-left:0px;">
<a href="http://teendrive365inschool.com/teens/video-challenge?utm_source=DE&utm_campaign=waystowin&utm_medium=email" title="" target="_blank">
<img alt="Toyota TeenDrive365" src="https://gallery.mailchimp.com/03342d2b00b6ccea697a3e7e5/images/be1f6169-1a44-4c56-ab24-82a3c96d7eec.jpg" width="164" style="max-width:480px;" class="mcnImage">
</a>
</td>
</tr>
<tr>
<td class="mcnTextContent" style="padding:8px 15px;color:#FFFFFF;font-family:Helvetica;font-size:11px;font-weight:normal;line-height:110%;text-align:center;" width="146" height="80" overflow="hidden;">
<span style="font-size:11px">
<strong>Toyota TeenDrive365 Video Challenge </strong>
</span>
<span style="font-size:10px"><br />
Film a safe driving PSA for a chance at $15,000!</span>
<br>
<span style="font-size:11px"><strong>Challenge Closes February 23</strong></span>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:5px;padding-right:0px;padding-bottom:0px;padding-left:0px;" valign="top" align="center" class="mcnButtonBlockInner">
<table border="0" cellpadding="0" cellspacing="0" width="70%" class="mcnButtonContentContainer" style="border-collapse:separate !important;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;background-color:#0C4B74;">
<tbody>
<tr>
<td align="center" valign="center" class="mcnButtonContent" style="font-family:Arial;font-size:11px;padding:8px;">
<a class="mcnButton" title="Learn More" href="http://teendrive365inschool.com/teens/video-challenge?utm_source=DE&utm_campaign=waystowin&utm_medium=email" target="_blank" style="font-weight:bold;letter-spacing:normal;line-height:100%;text-align:center;text-decoration:none;color:#FFFFFF;">Learn More</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>