0

我正在尝试为电子邮件模板设置一个表格，顶部有一个图像，占据整个宽度（600px），然后是两列从中间分开的图像。但是由于某种原因，右列将表格宽度推得太远了。

JS 小提琴：http: //jsfiddle.net/5QEhK/1/ 

<table width="600" style="border: 1px solid #b8b7b7;margin-bottom: 10px;">


    <!--Main Image-->

       <tr align="center" valign="center" width="580px">
           <td align="center" valign="center" width="580px">
               <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png" width="570px">
           </td>
       </tr> 



    <!--Two Columns-->
                 <tr>
                    <td valign="top" width="260" class="leftColumnContent">
                        <table border="0" cellpadding="15" cellspacing="0" width="100%">
                            <tr>
                                <td valign="top">
                                    <img style="width: 260px;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_left.png" mc:label="image"/></a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>


                    <td valign="top" width="260" class="rightColumnContent">

                        <table border="0" cellpadding="15" cellspacing="0" width="100%">
                            <tr>
                                <td valign="top">
                                    <img style="width: 260px;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_right.png" mc:label="image" mc:edit="tiwc300_image01" /></a>
                                </td>
                            </tr>

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

    </table>​
4

2 回答 2

2

您的第一个问题是您的主图像部分中有单个 td，它应该是colspan="2" 这样的。

   <!--Main Image-->

   <tr align="center" valign="center" width="580">
       <td align="center" valign="center" colspan="2">
           <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png" width="570px">
       </td>
   </tr>

其次，这不是问题，但是width在“px”中具有值的属性是错误的。

如果宽度作为一个属性出现，它应该不使用“px”，如果宽度作为css样式出现，那么它需要有一些测量单位，如“px”、“em”、“pt”

检查此演示

于 2012-11-01T18:26:47.173 回答
1

试试这个代码

我已经删除了一些样式，但是您可以将其放回去，理想情况下，您应该只使用 colspan 来满足这种要求

<table width="600px" style="border: 1px solid #b8b7b7;margin-bottom: 10px;">
<!--Main Image-->

<tr>
   <td colspan="2" valign="center">
       <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png">
   </td>
</tr>

<!--Two Columns-->
<tr>
  <td valign="top" width="50%" class="leftColumnContent"> 
    <img style="" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_left.png" mc:label="image"/>
  </td>
  <td valign="top" width="50%" class="rightColumnContent">
      <img style="" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_right.png" mc:label="image" mc:edit="tiwc300_image01" /></a>
  </td>  
</tr>              
</table>
于 2012-11-01T18:38:50.230 回答