Внутренняя обивка колонны - PullRequest
       22

Внутренняя обивка колонны

0 голосов
/ 06 сентября 2018

Я нахожусь в процессе создания настраиваемого HTML-шаблона, но не могу понять, как сделать внутренние отступы для столбца (те, которые имеют кнопку «призыва к действию»)

Я пытался вставить маленький тд с шириной перед содержимым, но он разбивает столбец.

Ниже приведен код (извиняюсь за объем), но я не могу точно определить, где его сократить, не сломав его.

enter image description here

    
    
    
    <table width="650" style="background-color: #077ec3" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="2 Column With IMAGE + TITLE + DESC + READ MORE" style="table-layout:fixed;">
	<tr>
        <td height="15" class="fix_height"> </td>
     </tr>

      <tr>
        <td class="pad_side" >
          <table width="310"  border="0" cellspacing="0" cellpadding="0" align="left" class="wrapper">
            <tr>
              <td align="center" valign="top">
                <table width="310" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
                  <tr>
                    <td width="45" class="hide"> </td>
                    <td valign="top">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                          <td align="center" valign="top"><img src="https://gallery.mailchimp.com/330985abb260e1ae49eb607dd/images/a3bb236f-8b0a-4003-93de-6f40d964612c.jpg" width="265" height="130" alt="img_265X130" style="display:block;border:none; max-width:265px;" mc:edit="product1_img">
                          </td>
                        </tr>
                        <tr>
                          <td height="25" class="fix_height" style="background-color: #ffffff;"> </td>
                        </tr>
                        
                        
                        <tr style="background-color: #ffffff">
                          <td class="black" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:18px;line-height:24px;color:#333333;" mc:edit="product1_title">Blog Post</td>
                        </tr>
                        <tr>
                          <td height="8" style="line-height:1px;font-size:1px; background-color: #ffffff;"> </td>
                        </tr>
                        <tr>
                          <td class="grey" align="left" valign="top" style="font-family:Arial, sans-serif;background-color: #ffffff;font-size:13px;line-height:20px;color:#333333;" mc:edit="product1_description">Text block 1</td>
                        </tr>
                        <tr>
                          <td height="15" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
                        </tr>
                        
                        
                        
                        
                        
                        
                        <tr mc:hideable>
                          <td height="43" style="background-color: #ffffff" valign="top">
                            <table border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
                              <tr>
                                <td>
                                  <table border="0" align="center" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td height="43" class="button_2" align="center" style="background-color:#ffffff; font-family:Arial, sans-serif;font-size:16px;line-height:18px;color:#ffffff;border-radius:3px;" bgcolor="#ffffff" mc:edit="btn_10">
                                        <a href="#" target="_blank" style="text-decoration:none;color:#ffffff;font-weight:600" class="button_2">   Call to action   </a>
                                      </td>
                                    </tr>
                                      <tr>
                          <td height="25" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
                        </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>

                        
                        
                        
                        <tr>
                          <td height="40" style="line-height:1px;font-size:1px;" class="hide"> </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table width="310" border="0" cellspacing="0" cellpadding="0" align="right" class="wrapper">
            <tr>
              <td align="center" valign="top">
                <table width="310" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
                  <tr>
                    <td align="left" valign="top">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                          <td align="center" valign="top" class="pad_top"><img src="https://gallery.mailchimp.com/330985abb260e1ae49eb607dd/images/a3bb236f-8b0a-4003-93de-6f40d964612c.jpg" width="265" height="130" alt="img_265X130" style="display:block;border:none; max-width:265px;" mc:edit="product2_img">
                          </td>
                        </tr>
                        <tr>
                          <td height="25" class="fix_height" style="background-color: #ffffff;"> </td>
                        </tr>
                        <tr>
                          <td class="black" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:18px;line-height:24px;color:#333333;background-color: white;" mc:edit="product2_title">Blog Post 2</td>
                        </tr>
                        <tr style="background-color: white;">
                          <td height="8" style="line-height:1px;font-size:1px;" > </td>
                        </tr>
                        <tr>
                          <td class="grey" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:13px;line-height:20px;color:#333333;background-color:#ffffff;" mc:edit="product2_description">Text block 2</td>
                        </tr>
                        
                        
                        <tr style="background-color: white;">
                          <td height="15" style="line-height:1px;font-size:1px;"> </td>
                        </tr>
                        
                        
                           <tr mc:hideable>
                          <td height="43" style="background-color: #ffffff" valign="top">
                            <table border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
                              <tr>
                                <td>
                                  <table border="0" align="center" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td height="43" class="button_2" align="center" style="background-color:#ffffff; font-family:Arial, sans-serif;font-size:16px;line-height:18px;color:#ffffff;border-radius:3px;" bgcolor="#ffffff" mc:edit="btn_10">
                                        <a href="#" target="_blank" style="text-decoration:none;color:#ffffff;font-weight:600" class="button_2">   Call to action   </a>
                                      </td>
                                    </tr>
                                      <tr>
                          <td height="25" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
                        </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                        </table>
                    </td>
                    <td width="45" class="hide"> </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

1 Ответ

0 голосов
/ 07 сентября 2018

Добавьте padding-left к td элементам, содержащим текст и CTA, которые вы хотите оставить. Padding хорошо поддерживается, поэтому будет работать нормально.

...