2017-02-13 4 views
0

私はMailchimpテンプレートを使用していました。私は画像とテキスト情報を持つ9つのセクションが必要です。私は9x3セクションを作成します。私はあなたが使用することができ、画像とキャプションを使用できるテンプレートビルダーでこのオプションを使用しました。イメージの下のキャプション。それは<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

は、私はすべてのテーブルを結合するために必要な判明します1つのクラスにまとめてコード化します。彼らはすべて別々のクラスでした。私はそれを考え出した。ありがとう。これはクローズ/削除することができます。

関連する問題