2017-02-13 19 views
0

Я использовал шаблон Mailchimp. Мне нужно 9 разделов с изображениями и текстовой информацией. Я создаю 9 разделов 3x3. Я использовал опцию в построителе шаблонов, где вы можете использовать и изображение, и подпись. Подписи под изображением. Он оформлен как <td>. Тем не менее, у меня много проблем, чтобы убедиться, что высоты одинаковы, поэтому они выглядят выровненными. Кажется, я не понимаю. Я перепутал с заполнением, я даже добавил высоту (не имел ее раньше), а также сделал overflow: hidden; CSS ... все, но каждый раздел продолжает меняться, и он просто не выглядит выровненным. Есть ли способ исправить это?Mailchimp: Столбцы таблицы имеют разную высоту. Как я могу сделать их такими же?

enter image description here

Смотрите раздел моего кода, где у меня есть первый столбец (созданный вначале 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&amp;utm_campaign=waystowin&amp;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&nbsp;a&nbsp;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&amp;utm_campaign=waystowin&amp;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> 

ответ

0

Оказывается, мне нужно, чтобы объединить все таблицы вместе в один класс и кодировать их вместе. все они были отдельными классами. Я понял. Благодарю. это может быть закрыто/удалено.