Issue пытается выровнять изображение под столом

Question

У меня есть следующий HTML:

<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#C5C5C5"> 
      <tr> 
       <td style="padding:10px 0"> 
         <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth"> 
          <tr> 
           <td valign="top" align="left" class="center" style="padding:0px 0px 0 10px"> 
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628618/image01_et7dqm.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></a></p> 
           </td> 
          </tr> 
         </table> 
         <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth"> 
          <tr> 
           <td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px"> 

            <table> 
             <tr> 
              <td valign="top" style="padding:0 10px 15px 0"> 
               <img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" /> 
              </td> 
              <td valign="middle" style="padding:0 10px 10px 0"><a href="#" style="text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif ">Two column - text right</a> 
              </td> 
             </tr> 
            </table>  

            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px"> 
             SOME TEXT ABOUT SOMETHING YET TO BE CONFIRMED 
             <br/><br/> 

            </p> 
           </td> 
          </tr> 
         </table>               
       </td> 
      </tr> 
     </table><!-- End 2 Column Images - text left -->    
     <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth"> 
      <tr> 
       <td align="right"> 
        <a href="#"><img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" border="0" style="border-radius: 0px; width: 20px; display: block;" class="deviceWidth" /> 
       </td> 
      </tr> 
     </table> 
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#E1E1E1"> 
      <tr> 
       <td style="padding:10px 0"> 
         <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth"> 
          <tr> 
           <td valign="top" align="left" class="center" style="padding:0px 0px 0 10px"> 
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628616/image1.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></a></p> 
           </td> 
          </tr> 
         </table> 
         <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth"> 
          <tr> 
           <td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px"> 

            <table> 
             <tr> 
              <td valign="top" style="padding:0 10px 15px 0"> 
               <img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" /> 
              </td> 
              <td valign="middle" style="padding:0 10px 10px 0"><a href="#" style="text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif ">Two column - text right</a> 
              </td> 
             </tr> 
            </table>  

            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px"> 
             SOME TEXT YET TO BE CONFRMED 
             <br/><br/> 

            </p> 
           </td> 
          </tr> 
         </table>               
       </td> 
      </tr> 
     </table> 

, который оказывает следующие

Как вы можете видеть на дне у меня есть треугольник, который я» m пытается позиционировать, поэтому он переполняется в следующий ящик, к сожалению, я не могу на всю жизнь заставить его правильно сидеть, т. е. пустое пространство между темным оттенком и более светлым оттенком серого, чтобы исчезнуть, может кто-нибудь дать мне пожалуйста, конечный результат должен выглядеть так: :

Answer 1

Прежде всего, рекомендуется не использовать таблицы для форматирования разделов страницы. В этом случае вы можете установить родительский треугольник как относительный позиционированный элемент с высотой 0px и треугольником положения как абсолютный элемент. Итак:

<div class="deviceWidth" style="width:580px;position:relative;height:0;margin-right:auto;margin-left:auto;"> 
     <img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" style="border:0;position:absolute;top:0;right:20px;border-radius: 0px; width: 20px;" class="deviceWidth"> 
     </div> 

также обратите внимание, что:

1. отсоединять дисплей: блок из изображения
2. набор границы: 0 внутри стилей не как отдельный атрибут
3. я добавил в недостаточной мере правый: авто и margin-left: -auto для выравнивания div в центре экрана