问题努力下表

对准图像，我有以下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>

这使得如下

enter image description here

正如你可以在底部看到我有一个三角形的我米试图定位，所以它溢出到下一个盒子，不幸的是我不能为我的生活得到它正确地坐着，即暗色调和灰色之间的白色空间以消除出现可以有人给我一个手请最终结果是这样的：

所有的

enter image description here

来源

2015-04-12 Code Ratchet

在三角形之后请您提供更多代码吗？ –

@AliSheikhpour添加了下一个灰色框。 –

只是一个建议：让你的风格与HTML分离。这将有助于很多调试。 –

首先建议不要用于格式化网页的部分表。在这种情况下，您可以将三角形的Parent设置为高度为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>

也请注意：从图像块

组边框：

卸下显示屏0内部样式而不是作为一个单独的属性
我已经加入与容限right：auto and margin-left：-auto将div对准屏幕中心

来源

2015-04-12 06:22:25

问题努力下表

回答

相关问题