尝试将图像对齐到表格下方

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>

呈现如下

正如你在底部看到的，我有一个三角形，我正试图定位所以它溢出到下一个盒子，不幸的是我不能为我的生活让它正确坐，即之间的白色空间黑暗的阴影和较浅的灰色阴影可以让某人给我一只手请最终结果如下：

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. 从图像中删除display：block
2. 设置边框：0内部样式不作为单独的属性
3. 我添加 margin-right：auto 和 margin-left：-auto 以对齐屏幕中心的div